绝对定位与相对定位

最新推荐文章于 2022-09-29 15:06:48 发布

Mephisto180502

最新推荐文章于 2022-09-29 15:06:48 发布

阅读量455

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_33800083/article/details/105783680

版权

Web 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

CSS Position（定位）

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

position 属性指定了元素的定位类型。

position 属性的五个值：

static
relative
fixed
absolute
Inherit

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

① static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。

position:static;

② fixed 定位

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。元素的位置相对于浏览器的位置是固定位置。即使窗口是滚动的它也不会滚动。

position:fixed;
top:30px;

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

③ relative 定位

相对定位元素的定位是相对其正常位置。

position:relative;
left:-20px 或 right：20px;   /*相对于其正常位置向左移动20px*/
left:20px;                   /*相对于其正常位置向右移动20px*/

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

④ absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于body。

absolute定位使元素的位置与文档流无关，因此不占据空间。

position：absolute；
left：100px 或 right：-100px；    /*距离左边的页面100px*/
top：140px;                      /*距离页面的顶部150px*/

⑤ Inherit 定位

继承父元素的position值。

图文讲解

首先设置4个div：

<body>
    <div class="div1">第一个div</div>
    <div class="div2">第二个div</div>
    <div class="div3">第三个div</div>
    <div class="div4">第四个div</div>
</body>

添加背景色，效果如下：

给第二个div设置absolute：

.div2{
    height:100px;
    background-color: blueviolet;
    position:absolute;
    top:50px;
    left:50px;
}

效果如图：

第二个div设置了absolute,则该div的宽度就由文本决定，且下面的div会上移占据之前第二个div的位置，top和left是相对于离它最近且不是static定位的父元素来定位的，在此div2因为没有父元素，所以第二个div相对于根元素即html元素来定位。

将第二个div设置为relative：

.div2{
    height:100px;
    background-color: blueviolet;         
    position:relative;
    left:50px;
    top:50px;
}

设置relative的div不会影响其他div的位置，且top和left是相对于它原本自身的位置来定位。

总结：
Absolution：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。

Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。

z-index 属性

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。

一个元素可以有正数或负数的堆叠顺序。

position:absolute; left:0px; top:0px; z-index:-1;

属性值

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

Mephisto180502

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
绝对定位与相对定位

CSS Position（定位）除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box）...
复制链接

扫一扫