作者：利盈香玟倩文怡 | 来源：互联网 | 2023-05-18 10:28
我在以前的公司，并不怎么用position这个属性，只是在写一些特殊效果的时候才用绝对定位。这就导致我对这个属性很不理解。今天有空，百度学习了一下。留下下面的文字position的四个属性值：r
我在以前的公司，并不怎么用position这个属性，只是在写一些特殊效果的时候才用绝对定位。这就导致我对这个属性很不理解。今天有空，百度学习了一下。留下下面的文字
position的四个属性值： relative ，absolute ，fixed，static （画外音：inherit其实也是，不过今天不怎么说他~）
写个小小的页面：
<html>
<head>
<style>
#parent{}
#div1{border:1px red solid; width:200px; height:100px}
#div2{border:1px blue solid; width:200px; height:100px}
style>
/head>
<body>
<div id="parent">
<div id="div1">div1div>
<div id="div2">div2div>
div>
body>
html>
这是原始页面的样子：
1、relative
这个值比较简单，它的偏移是相对自己来进行的。意思就是，div1如果设置了relative值，那么，它的偏移，就会根据top，right，bottom，left的值以它原来的位置为基准偏移，而不管其他元素会怎么样。
不信？试试看。
注意：例子中2个div是同级关系哦~~
#div1{border:1px red solid; width:200px; height:100px;position: relative; top: 15px; left: 25px;}
div1的样式改成这样。div2不动。那么，页面的样子变成下面
好啦。看到了吧~如果不设置relative时div应该在哪里就在哪里，一旦设置后就按照它理应在的位置进行偏移。
div2呢？它还在原来的位置，如果你给他设置relative，那么他也会偏移。
最后说一句：relative的偏移是基于对象的margin的左上侧的。就是说，如果你设置了margin，那么偏移的时候会加上的。
2、absolute
css手册是这样说的：“生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。”
但是他究竟是根据谁来偏移的呢？
这里有2种状况，用div1来说明：
1、如果div1父容器（id='parent'的div）没有设置position属性，那么div1的偏移是以body为依据的。比如这样（下面去掉了div2，方便看清楚）：
<html>
<head>
<style>
body{ margin:50;border:1px green solid; height:200px;}
#parent{}
#div1{border:1px red solid; width:200px; height:100px;position:absolute; top: 15px; left: 25px; }
style>
head>
<body>
<div id="parent">
<div id="div1">div1div>
div>
body>
html>
这样的效果如下：
看到了吧。div1是以body为基准偏移的。
2、如果div1的父容器设置了position属性，并且position的属性值为absolute 或者relative，那么div1就会依据父容器进行偏移。比如这样：
<html>
<head>
<style>
body{ margin:10px;border:1px green solid; height:500px;}
#parent{position:absolute; border:1px black solid; width:400px; height:200px; margin:20px;}
#div1{border:1px red solid; width:200px; height:100px;position:absolute; top: 15px; left: 25px; }
style>
head>
<body>
<div id="parent">
<div id="div1">div1div>
div>
body>
html>
最终效果如下：
需要注意的是：如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。
那么放两个div在父容器里面呢？比如这样：
<html>
<head>
<style>
body{ margin:10px;border:1px green solid; height:500px;}
#parent{position:absolute; border:1px black solid; width:400px; height:200px; margin:20px;}
#div1{border:1px red solid; width:200px; height:100px;position:absolute; top: 15px; left: 25px; }
#div2{border:1px blue solid; width:200px; height:100px; }
style>
head>
<body>
<div id="parent">
<div id="div1">div1div>
<div id="div2">div2div>
div>
body>
html>
效果如下：
div1设置了position属性，导致它浮动起来了。div2就占据了原来div1应该在的位置~
3、fixed
这个好理解，它总是以body为依据的。
<html>
<head>
<style>
body{ margin:10px;border:1px green solid; height:300px;}
#parent{position:absolute; border:1px black solid; width:400px; height:200px; margin:20px;}
#div1{border:1px red solid; width:200px; height:100px;position:fixed; top: 15px; left: 25px; }
style>
head>
<body>
<div id="parent">parent
<div id="div1">div1div>
div>
body>
html>
效果如下：
4、static
这其实是position的默认值。。。
好吧好吧。还有一个inherit，其实那意味着继承父容器的position 属性的值，可以自己试试看~~~这里不贴了。
京公网安备 11010802041100号