html position布局

html布局的方式

标准流  （文档流），浮动，  position定位，  flex布局，表格布局，网格布局

html元素可以分为

块级元素：div table p ol ui li 等(在标准流中独占一行)

内联元素：a span img input等（在标准流中不独占一行）

position定位：使用position属性进行定位

position属性的值有：static relative absolute fixed inherit

static:文档流 默认值

relative:相对定位，可以通过top,bottom,left,right来改变其相对于标准流的位置，（改变位置后可能与其他元素重叠，但原占有的空间不变）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  #p{
    border: 1px solid black;
  }
  #span{
    position: relative;
      left: 20px;
      top:20px;
      color: red;
  }
</style>
<body>
<p id="p">这是一个段落，这里有很多内容。这是一个段落，这里有很多内
    容。<span id="span">注意我的位置</span>这是一个段落，这里有很多内
    容。</p>
</body>
</html>

结果：

可以看出span标签的内容相对与原本的文档流的位置发生了改变，向右和下移动了20px，注意其原本所占有的空间并没有关闭

absolute:绝对定位，可以通过top,bottom,left,right来改变其相对于标准流的位置，元素从标准流完全删除，原本应该占有的空间会关闭，定位后生成块级框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  #p{
    border: 1px solid black;
  }
  #span{
    position: absolute;
      left: 20px;
      top:20px;
      color: red;
  }
</style>
<body>
<p id="p">这是一个段落，这里有很多内容。这是一个段落，这里有很多内
    容。<span id="span">注意我的位置</span>这是一个段落，这里有很多内
    容。</p>
</body>
</html>

结果：

将position属性设置为absolute后，span标签脱离了文档流，相当于从文档流中删除，等定位成功后在显示，其原来在文档流中所占的空间关闭。

fixed:相对于窗口进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  #p{
    border: 1px solid black;
  }
  #span{
    position: fixed;
      left: 200px;
      top:200px;
      color: red;
  }
</style>
<body>
<p id="p">这是一个段落，这里有很多内容。这是一个段落，这里有很多内
    容。<span id="span">注意我的位置</span>这是一个段落，这里有很多内
    容。</p>
</body>
</html>

结果

inherit:继承父元素的position

z-index 改变元素的层叠顺序(同一层叠上下文值越大显示越在上面)

定位元素（有position属性）z-index才有效 position：static无<!DOCTYPE html><html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
   #parent{
       width: 600px;
       height: 600px;
       background: red;
   }
    #child{
        width: 300px;
        height: 300px;
        background: yellow;
        z-index:-1;

    }
</style>
<body>
<div id="parent">
    <div id="child">
    </div>
</div>
</body>
</html>

id为child的div无position属性 z-index失效

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
   #parent{
       width: 600px;
       height: 600px;
       background: red;
   }
    #child{
        position: absolute;
        width: 300px;
        height: 300px;
        background: yellow;
        z-index: -1;
    }
</style>
<body>
<div id="parent">
    <div id="child">
    </div>
</div>
</body>
</html>

可见当为child设置了position属性后z-index有效了因为值为-1，默认的parent元素的值为0 所以其被父元素给挡住了

注意以下代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
   #parent_1{
       position: absolute;
       left: 0;
       top: 0;
       width: 600px;
       height: 600px;
       background: red;
       z-index: 5;
   }
    #child_1{
        position: absolute;
        width: 300px;
        height: 300px;
        background: yellow;
        z-index: 10;
    }
    #child_2{
        position: absolute;
        top: 10px;
        left: 10px;
        width: 300px;
        height: 300px;
        background: blue;
        z-index: 4;
    }
    #parent_2{
        position: absolute;
        left: 100px;
        top: 100px;
        width: 600px;
        height: 600px;
        background: black;
        z-index: 8;
    }
</style>
<body>
<div id="parent_1">
    <div id="child_1"></div>
    <div id="child_2"></div>
</div>
<div id="parent_2"></div>
</body>
</html>

虽然black区域的z-index值为8小于yellow区域的z-index的值10，但black区域显示在yellow区域的上面，因为2个位于不同的层叠上下文（2个不是同级兄弟元素），实际上比较的是yellow区域的父元素的值和black区域的值，5<8，所以yellow区域被遮挡

 position实现3栏布局，中间宽度自适应

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
   .box {
     width: 100%;
     height: 400px;
    }
   .box>div{
       height: 100%;
       position: absolute;
   }
   .left{
       width: 300px;
       background: red;
       left: 0;
       top: 0;
   }
   .center{
        background: yellow;
        height: 100px;
       left: 300px;
       right: 300px;
       top: 0;
       bottom: 0;
    }
    .right{
        background: blue;
        width: 300px;
        right: 0;
        top: 0;
    }

</style>
<body>
<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

</body>
</html>

 

posted @ 2018-04-13 14:38  dengcun  阅读(284)  评论(0)    收藏  举报