position四个属性详解

最新推荐文章于 2024-07-23 22:34:05 发布

今天会下雨吗

最新推荐文章于 2024-07-23 22:34:05 发布

阅读量1.8w

点赞数 56

分类专栏： CSS 文章标签： css3 html

本文链接： https://blog.csdn.net/weixin_45663697/article/details/117453901

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. `position:static;`

这个属性让元素使用正常的布局(元素在文档常规流中当前的布局位置)。

也就是说元素没加这个属性和加了以后位置都是不变的
只是此时 top, right, bottom, left 和 z-index属性无效。

2. `position:relative;`：相对定位

在元素原有的位置基础上，根据设置的top,left调整元素位置
不会改变页面布局，不影响其他元素的偏移，因此会在此元素未添加定位时所在位置留下空白
position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OZplJ2Bs-1622554588688)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20210601203511267.png)]$

3. `position:absolute`：绝对定位

假设给A元素添加绝对定位，那么A元素就会相对于最近的非static定位祖先元素偏移，来确定A元素位置。
当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）
A元素会被移出正常文档流，并不为元素预留空间。不会像relative那样，在元素未添加定位时所在位置留下空白。
绝对定位的元素可以设置外边距（margins），且不会与其他边距合并

<style>
	.box {
      display: inline-block;
      width: 100px;
      height: 100px;
      background: red;
      color: white;
    }

    #two {
      position: absolute;
      top: 20px;
      left: 20px;
      background: blue;
    }
</style>

<body>
    <div class="box" id="one">One</div>
    <div class="box" id="two">Two</div>
    <div class="box" id="three">Three</div>
    <div class="box" id="four">Four</div>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CdQLzHjd-1622554588691)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20210601204054873.png)]$
按照下面代码这样，two这个盒子是相对于body定位的。如果给上面四个盒子外添加一个父盒子，并且给这个父盒子添加除了static以为的定位，那么他就会相对于父盒子偏移。