css_position详解

最新推荐文章于 2022-06-25 11:12:49 发布

tong-wl

最新推荐文章于 2022-06-25 11:12:49 发布

阅读量272

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u013785316/article/details/70313086

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css_position详解

1.position的属性值

值	描述	特点	使用场合
static	默认值，普通流定位。(top, bottom, left, right 和 z-index 无效)	未对元素设置position，默认都是static定位	/
relative	相对定位。相对于它在正常流中的默认位置偏移。	1.相对于它在正常流中的默认位置进行偏移； 2.原位置依然占据文档流空间。 3.不会改变元素类型(块元素、行内元素、行内块元素)	1.适合于移动较小的偏移； 2.原位置空出来也不影响整体页面美观的布局(源于原位置依然占据文档空间的限制) 3.配合absolute进行定位
absolute	绝对定位。相对于除static以外的第一个祖先元素进行定位。(直到向上查到html(chrome、firefox测试)为止)	1.相对于除static以外的第一个祖先元素进行定位。 2.会脱离文档流，不会占据页面空间； 3.将元素变成块元素	经常和relative配合使用，比如下拉菜单、提示信息，元素的特殊布局(叠加)等。
fixed	固定定位。相对于浏览器窗口进行定位。	1.相对于浏览器窗口进行定位。 2.会脱离文档流，不会占据页面空间； 3.将元素变成块元素	1.广告信息; 2需固定在浏览器窗口某位置的操作按钮; 3.弹出框(登录框)的背景面板。

2.top、bottom、left、right

属性介绍：

top、right、bottom、left属性说明

值	描述
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。

top、bottom、left、right可能的值：

值	描述
auto	默认值。通过浏览器计算边缘的位置。
%	设置以父元素的百分比计算的位置。可使用负值。
length	使用 px、cm 等单位设置元素的位置。可使用负值。
inherit	规定应该从父元素继承属性的值。(ie不可用)

属性说明

1). 所有定位元素(static、absolute、relative、fixed)都有top等值，但是设置top等值只对absolute、relatvie、fixed有效！

2). static：static默认top等值为auto，给static元素设置top等值是无效的！

3). relative：如果原元素top和bottom值都为auto，则设置relative(不手动设置top、bottom值)后，top等值默认为0;如果其中之一为auto，则取另外一个值的相反数；如果都不是auto，bottom将取top的值的相反数。left的值始终等于right的值。

4). absolute：给元素仅仅设置了position:absolute; 效果是：这个元素变成了块元素(并体现它的特点，比如占一行、可设置width等);它脱离了文档流！！！；它的top等值并不会变化，还是原来的auto。(所以若不给position:absolute;的元素设置top等值，它的top等值是auto，位置不会发生变化)

5). fixed：同上absolute特点。

6). %是相对于父元素的值(这个值=padding值+内容的width/height)。

3.z-index

属性描述：设置元素的堆叠顺序。

属性说明：

1). 若不设置z-index，元素的z-index默认为auto。
2). 设置z-index只对absolute、relative、fixed有效，对static无效！！
3). absolute、relative、fixed的默认auto比static的默认auto要大，所以他们覆盖在static元素的上面。
4). 堆叠顺序的比较都是在同一层叠上下文内比较。
5). 层叠上下文的创建方式：

页面根元素天生具有层叠上下文，称之为“根层叠上下文”。
z-index值为数值的定位元素的传统层叠上下文(不设置或者设置z-index:auto;的并不会产生层叠上下文)。
其他CSS3属性。

z-index参考资料：

4.例子

4.1

4.1.1 html代码

<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>
 </body>

4.1.2 css样式

.parent{
    width:500px;
    height:500px;
    background:#f33; /*light red*/
    margin:100px;
}

.parent>div{
    height:100px;
}

.child1,.child2{
    width:100px;
}

.child1{
    background:#3f3; /*light green*/
}

.child2{
    background:#33f;/*light blue*/
}

.child3{
    width:200px;
    background:#ff6; /*light yellow*/
}

4.1.3 显示效果

4.2

4.2.1 html代码

<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>
 </body>

4.2.2 css样式

.parent{
    width:500px;
    height:500px;
    background:#f33; /*light red*/
    margin:100px;
}

.parent>div{
    height:100px;
}

.child1,.child2{
    width:100px;
}

.child1{
    background:#3f3; /*light green*/
}

.child2{
    background:#33f;/*light blue*/
    position:absolute;
}

.child3{
    width:200px;
    background:#ff6; /*light yellow*/
}

4.2.3 显示效果

4.3

4.3.1 html代码

<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>
 </body>

4.3.2 css样式

.parent{
    width:500px;
    height:500px;
    background:#f33; /*light red*/
    margin:100px;
}

.parent>div{
    height:100px;
}

.child1,.child2{
    width:100px;
}

.child1{
    background:#3f3; /*light green*/
}

.child2{
    background:#33f;/*light blue*/
    position:absolute;
    top:0;
}

.child3{
    width:200px;
    background:#ff6; /*light yellow*/
}

4.2.3 显示效果

4.1和4.2对比：

4.1是最普通的普通流定位，无需多言。4.2中给.child2多设置了position:absolute，显示结果发生了改变，如图4.2.3，原因解释：给.child2元素设置absolute定位，使得①.child2元素变成了块元素(当然它本身就是块元素)②.child2元素脱离了文档流，不再占据页面空间。所以当.child2脱离文档流之后，后面的.child3就和.child1上下相邻了(因为child2脱离出去了！)。其次因为只给.child2设置了position:absolute，而并没有设置top、left等值，所以.child2的top、left等值默认是auto，所以它的位置不会改变。(这里top、left等值默认是auto，同时参考物也是未设置position:absolute时的参考物,而并不是设置了absolute之后的html作为参考物)。又因为child2(absolute)的z-index也没有设置，默认为auto，child3(static)的z-index也是auto，但是absolute的auto值是优先于static的auto值的，所以child2会覆盖在child3上面(因为child2的width是100px，child3的width是200px，所以child2只是覆盖了部分的child3)。

4.2和4.3对比：

4.3比4.2多了一项css设置：给.child2多设置了top:0。.child2的定位是absolute定位，根据规则：absolute相对于除static以外的第一个祖先元素进行定位。(直到向上查到html(chrome、firefox测试)为止)，由以上规则我们知道.child2的top、left等属性的参考物是根元素html，4.3中top设置为了0，就是相对于html根元素top为0，所以就紧贴在html上边缘；又因为4.3并没有设置left/right，所以left/right值默认为auto，所以他们的横向位置并不会发生改变。