css-position

来源：互联网发布：netbeans mac 快捷键编辑：程序博客网时间：2024/05/21 14:55

最近看书时，看到了CSS的位置样式说明，正好也想起前不久面试被问及position属性值及其含义，当时记忆也比较模糊，答得不好，现在赶紧恶补一下基础知识。

position属性规定元素的定位类型，属性值和描述见下述表格（摘自w3school）：

position属性值值描述 absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位.元素的位置通过“left”,"top","right","bottom"属性进行规定 fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过“left”,"top","right","bottom"属性进行规定 relative生成相对定位的元素，相对于正常的位置进行定位。因此，“left:20”会向元素的left位置添加20像素 static默认值。没有定位，元素正常的出现在流中（忽略top,bottom,left,right或者z-index声明） inherit规定应该从父元素继承position属性的值

其中比较容易让人混淆的是absolute和relative

absolute从字面上也可以理解是绝对定位的意思，它脱离了文档结构，参照static定位以外的第一个父元素，使用left、top、right、bottom进行定位，并且不会占据原来的位置。

实验一：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>absolute绝对定位演示code</title>    <style type="text/css">        .parent{            width: 100px;            height: 100px;            background: red;            left: 50px;;        }        .child1{            position: absolute;            width: 100px;            height: 100px;            background: blue;            top:50px;            left: 50px;        }    </style></head><body><div class="parent">1    <div class="child1">2</div></div></body></html>

效果图：

首先可以看出div1的position属性是默认值static，所以left:50px;对其没有任何效果，而div2的position属性是absolute，相对于页面的左上角进行定位。

实验二：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>absolute绝对定位演示code</title>    <style type="text/css">        .parent{            width: 100px;            height: 100px;            background: red;            /*left: 50px;;*/            position: absolute;            left: 100px;;        }        .child1{            position: absolute;            width: 100px;            height: 100px;            background: blue;            top:50px;            left: 50px;        }    </style></head><body><div class="parent">1    <div class="child1">2</div></div></body></html>

效果图：可以看出absolute定位相对于父元素进行了偏移，此时div1的position设置为absolute，div2以div1的位置为基准进行偏移。（div1 position设置为relative和fixed也是同样的效果）。查看了网上前辈们的介绍还了解到absolute元素会悬浮于页面上方，遮挡住下方的页面内容。设置absolute会使得元素已有的float失效。

relative是相对定位，相对的是谁呢？相对的是自身的位置，他不会影响其他元素的位置，但是仍然占据着原来的位置，只是在视觉上发生了偏移。

实验一：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>relative绝对定位演示code</title>    <style type="text/css">        div{            margin: 0;            padding: 0;            list-style: none;        }        .parent{            width: 100px;            height: 100px;            background: red;            left:300px;        }        .child1{           /* position: relative;*/            width: 50px;            height: 50px;            background: blue;            top:50px;            left: 50px;        }        .super1{            width: 200px;            height: 200px;            background: yellow;            position: relative;            left: 50px;        }    </style></head><body><div class="super1"><div class="parent">    </div></div><div class="child1"></div></body></html>

效果如下图：super1 div元素设置relative，相对于原来的位置进行偏移，他会影响自身子元素的位置，但不会影响其他兄弟元素的位置。

这时候，如果把兄弟元素设置为absolute，会有什么效果呢？

明显，absolute会影响后续兄弟元素的位置，并且原先他所占的位置也没有了，被后续兄弟元素占领，并有覆盖现象，证实了上述的说法。

absolute和relative组合出现的情况：

实验：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>relative绝对定位演示code</title>    <style type="text/css">

        div{            margin: 0;            padding: 0;            list-style: none;        }        .parent{            width: 100px;            height: 100px;            background: red;            position:relative;            top:100px;        }        .child1{            position: relative;            width: 50px;            height: 50px;            background: blue;            top:50px;            left: 50px;        }        .super1{            width: 200px;            height: 200px;            background: yellow;            position: absolute;            left: 50px;        }    </style></head><body><div class="super1"><div class="parent">    </div></div><div class="child1"></div></body></html>

效果如下图：

首先看super1 div position属性值是absolute，但是他没有父元素，所以根据页面左上角为基准向左偏移50px,他的子元素parent position属性值是relative 相对于自身原本位置进行偏移，原本位置与父元素顶齐，现在向下偏移100px。super1的兄弟元素child1 position属性值为relative 但由于super1元素原先位置已不再占有，所以child1元素原先的位置是以页面左上角为起点的，现在以这个为基准进行偏移。

至此，通过一些简单的实验加深一下对position位置的了解。多动手多思考，记忆更深刻。

阅读全文

0 0