对布局定位设置-position

最新推荐文章于 2024-09-23 11:30:11 发布

转载最新推荐文章于 2024-09-23 11:30:11 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hlrblog/p/7868309.html

本文详细解析了CSS中的三种定位方式：绝对定位、相对定位和固定定位。包括每种定位的特点、影响及具体用法，并附带实例帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用position属性，会激活5个属性

left
right
bottom
top
z-index（-1至999）

注：z-index：会改变内容的层级关系，

1、绝对定位

position: absolute

影响：

元素会脱离文档流==元素原本占据空间释放
原点计算：最近一个有定位的父元素作为原点参考，如果没有，跟页面（0,0）作为参考
绝对定位是内嵌元素时，也可以设置宽高。

实例：

1 .div1{
2 width: 400px;
3 height: 400px;
4 background-color: greenyellow;
5 position: absolute;    *绝对定位,在本身的位置浮动起来了*/
6 left: 0px;   * left，right设置宽高有效，必须在使用定位后设置后*/
7 right: 0px;
9 }

2、相对定位
position: relative;

没有脱离文档流，原本元素在标准文档流之中占据的位置不会释放不会像-->
根据自身在文档流的位置作为原点计算
父相子绝
能保证文档流不受影响
能给子元素做一个参考点

.实例：

 1 div1{
 2 position: relative;
 3 width: 200px;
 4 background-color: red;
 5 height: 200px;
 6 left: 70px
 7 }

 9 .div1_1{
10 width: 100px;
11 height: 100px;
12 position: absolute;
13 /*position: relative;*/
14 background-color: yellow;
15 left: 70px;
16 }

1 <div class="div1">、、、、、、、、、、、父
2 <div class="div1_1"></div>、、、、子
3 </div>
4 <div class="div2"></div>、、、、、、、父兄

注：子父元素相对定位时，子元素会浮在父元素上面。

3、固定定位

脱离文档流
原点根据浏览器窗口（0,0）根父元素没有任何关系，不会跟父元素走
能保证文档流不受影响
能给子元素绝对定位提供原点参考。

实例：

1 .div3{
2 width: 300px;
3 height: 300px;
4 background-color: hotpink;
5 position: fixed;
6 right: 0px;
7 border: 0px;
8 }

转载于:https://www.cnblogs.com/hlrblog/p/7868309.html