absolute如果找不到定位父元素那么会相对于谁进行定位_第五章定位模型

最新推荐文章于 2021-07-20 13:39:15 发布

weixin_39862871

最新推荐文章于 2021-07-20 13:39:15 发布

阅读量148

点赞数

文章标签： absolute如果找不到定位父元素那么会相对于谁进行定位 ios fixed定位后内容不显示

第一节定位模型

定位是将某个元素放到某个位置上。

1.定位的方式

流动定位
文档默认的定位方式，元素按照自左向右，自上而下的方式定位。具有水流的特征，称为流动定位。
浮动定位
使用float属性实现元素的定位。
position属性定位
使用position属性设置元素的定位方式

2.position属性定位

position属性用于控制页面元素的位置

position:static/absolute/relative/fixed;

2.1 静态定位

元素没有设置position定位属性时默认就是静态定位，其实就是用页面流动模型进行定位。

2.2绝对定位

以特定的位置为参考进行定位。可以配合四个方向的偏移属性(left,top,right,bottom)进行元素定位。绝对定位的元素脱离了文档流，在文档中不占据任何位置。

默认的绝对定位，是以浏览器的左上角位置作为参考进行定位。
如果父容器设置了定位属性（absolute,relative,fixed），那么就以父容器为参考，进行定位

包含块:如果元素设置了定位属性为:absolute,relative,fixed,则该元素被称为包含块。此时，该元素的子元素在定位时，会以该元素为基准进行偏移。

<!DOCTYPE html>
<html>
 <head>
  <title> 这是我的页面 </title>
  <style type="text/css">
    #d1
    {
        width:100px;
        height:100px;
        background-color:blue;
        /*float:left;*/
        position:absolute;
        /*绝对定位和偏移属性结合使用
          以浏览器的左上角为标准进行偏移
        */
        /*left:100px;
        top:80px;*/
        right:100px;
        bottom:100px;
    }
    #d2
    {
        width:500px;
        height:300px;
        background-color:red;
        color:white;
    }
  </style>
 </head>

 <body>
  <!--绝对定位会让元素脱离文档流，跑到另外一个层上-->
  <div id="d1"></div>
  <div id="d2">这是一些内容,有很多东西</div>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title> 这是我的页面 </title>
  <style type="text/css">
  #d1
  {
    width:300px;
    height:300px;
    margin-left:200px;
    margin-top:200px;
    background-color:red;
    color:white;
    /*如果元素设置了定位属性为:absolute,relative,fixed
      则该元素被称为包含块。此时，该元素的子元素在定位时，
      会以该元素为基准进行偏移
    */
    position:fixed;
  }

  #d2
  {
    width:100px;
    height:100px;
    background-color:blue;
    position:absolute;
    left:10px;
    top:10px;
  }
  </style>
 </head>

 <body>
  <div id="d1">这是内容
    <div id="d2"></div>
  </div>
 </body>
</html>

2.3相对定位

相对定位，以元素原有的位置为基准进行定位，定位时可以使用偏移属性(left,top,right,bottom)进行位置的设置。没有脱离文档流，受文档流的制约。

2.4 固定定位

就是讲元素固定定位到浏览器窗口的某个位置。

<!DOCTYPE html>
<html>
 <head>
  <title> 这是我的页面 </title>
  <style type="text/css">
    #login
    {
        width:300px;
        height:200px;
        border:2px solid red;
        background-color:gray;
        /*固定到浏览器窗口的指定位置*/
        position:fixed;
        left:40%;
        top:20%;
    }
    form
    {
        width:200px;
        height:150px;
        border:2px dashed black;
        margin:10px auto;
    }
  </style>
 </head>

 <body>
  <!--固定定位-->
  <div id="login">
    <form>
        账号:<input type="text" name="account"/><br/>
        密码:<input type="password" name="pwd"/><br/>
        <input type="submit" value="登录"/>
    </form>
  </div>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
  <p>这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容</p>
 </body>
</html>

第二节祝福墙

<!DOCTYPE html>
<html>
 <head>
  <title> 这是我的页面 </title>
  <style type="text/css">
  #wall
  {
    border:2px solid gray;
    background-color:#ffcc33;
    width:600px;
    height:400px;
    /*让容器变为包含块*/
    position:relative;

    margin:0px auto;
  }
  #wall h3
  {
    text-align:center;
  }

  #wall div
  {
    width:150px;
    height:200px;
    border:1px solid red;
    font-size:12px;
  }

  #wall div:hover
  {
    z-index:9;
  }


  #wall div p
  {
    text-indent:2em;
  }
  #wall div.card1
  {
    border:2px dashed blue;
    background-color:#ff66cc;
    position:absolute;
    left:50px;
    top:50px;
  }
  #wall div.card2
  {
    border:2px dashed blue;
    background-color:#cc6699;
    position:absolute;
    left:70px;
    top:70px;
  }
  #wall div.card3
  {
    border:2px dashed blue;
    background-color:#ccff66;
    position:absolute;
    left:90px;
    top:100px;
  }
  #wall div.card4
  {
    border:2px dashed blue;
    background-color:#3333ff;
    position:absolute;
    right:50px;
    top:50px;
  }
  #wall div.card5
  {
    border:2px dashed blue;
    background-color:#66ff66;
    position:absolute;
    right:80px;
    top:100px;
  }


  </style>
 </head>

 <body>
  <div id="wall">
    <h3>祝福墙</h3>
    <div class="card1">
        <h4>To tommy:</h4>
        <p>
            今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错
        </p>
    </div>
    <div class="card2">
        <h4>To tommy:</h4>
        <p>
            今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错
        </p>
    </div>
    <div class="card3">
        <h4>To tommy:</h4>
        <p>
            今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错
        </p>
    </div>
    <div class="card4">
        <h4>To tommy:</h4>
        <p>
            今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错
        </p>
    </div>
    <div class="card5">
        <h4>To tommy:</h4>
        <p>
            今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错
        </p>
    </div>
  </div>
 </body>
</html>

第三节级联菜单

垂直级联菜单

<!DOCTYPE html>
<html>
 <head>
  <title> 这是我的页面 </title>
  <style type="text/css">
   ul
   {
    border:1px solid red;
    margin:0px;
    padding:0px;
    /*none:去除列表项目符号*/
    list-style:none;
   }

   #menu
   {
    width:150px;
   }

   #menu a
   {
    display:block;
    height:30px;
    text-align:center;
    line-height:30px;
   }

   #menu>li>a
   {
    background-color:black;
    color:white;
   }

   #menu ul a
   {
    background-color:gray;
    color:white;
   }
    /*初始隐藏二级菜单*/
   #menu ul
   {
    display:none;
   }

   /*放到一级菜单的li元素上时,让下面的ul元素显示*/
   #menu li:hover ul
   {
    display:block;
   }
  </style>
 </head>

 <body>
    <ul id="menu">
        <li>
            <a href="#">一级菜单1</a>
            <ul>
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单2</a>
            <ul>
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单3</a>
            <ul>
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">二级菜单3</a></li>
            </ul>   
        </li>
    </ul>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title> 这是我的页面 </title>
  <style type="text/css">
   ul
   {
    margin:0px;
    padding:0px;
    /*去除项目符号*/
    list-style:none;
    border:1px solid red;
   }
   #menu
   {
    overflow:auto;
   }
   #menu>li
   {
    float:left;
   }

   /*设置菜单样式*/
   #menu a
   {
    display:block;
    width:150px;
    height:30px;
    border:1px solid black;
    text-align:center;
    line-height:30px;
   }

   /*隐藏二级菜单*/
   #menu ul
   {
    display:none;
    /*让二级菜单绝对定义，避免影响其他元素*/
    position:absolute;
    background-color:white;
   }
    /*鼠标悬浮时,显示二级菜单*/
   #menu li:hover ul
   {
    display:block;
   }
  </style>
 </head>

 <body>
  <ul id="menu">
    <li><a href="#">一级菜单1</a></li>
    <li>
        <a href="#">一级菜单2</a>
        <ul>
            <li><a href="#">二级菜单1</a></li>
            <li><a href="#">二级菜单2</a></li>
            <li><a href="#">二级菜单3</a></li>
            <li><a href="#">二级菜单4</a></li>
        </ul>
    </li>
    <li>
        <a href="#">一级菜单3</a>
        <ul>
            <li><a href="#">二级菜单1</a></li>
            <li><a href="#">二级菜单2</a></li>
            <li><a href="#">二级菜单3</a></li>
            <li><a href="#">二级菜单4</a></li>
        </ul>   
    </li>
    <li><a href="#">一级菜单4</a></li>
  </ul>
  <p>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p>
 </body>
</html>

作业

汽车之家网页

旅游资讯网

weixin_39862871

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
absolute如果找不到定位父元素那么会相对于谁进行定位_第五章定位模型

第一节定位模型定位是将某个元素放到某个位置上。1.定位的方式流动定位文档默认的定位方式，元素按照自左向右，自上而下的方式定位。具有水流的特征，称为流动定位。浮动定位使用float属性实现元素的定位。position属性定位使用position属性设置元素的定位方式2.position属性定位position属性用于控制页面元素的位置position:static/absolute/relativ...
复制链接

扫一扫