CSS绝对定位的属性与区别

爱吃面的猫

已于 2023-09-09 11:02:07 修改

阅读量846

点赞数

分类专栏： css 文章标签： java 前端

于 2021-11-26 10:35:02 首次发布

本文链接：https://blog.csdn.net/qq_41946216/article/details/121553328

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定位(position)

--定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意
--使用position属性来设置定位
可选值：
static：默认值，元素是静止的没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的团定定位
sticky：开启元素的粘泽定位

relative相对定位

特点：就是灵魂出窍，灵魂出走，肉体不动。
如果相对定位开启，不设置偏移量(offset)，元素不变(包括原始位置，块或者行性质，不脱离文档流)。
如果是设置偏移量，则是相对自己原始位置进行偏移。（也就是元素在文档流里的位置）
相对定位会提升元素的层级。层次高于文档流中的元素，所以可能会覆盖其他的元素
相对定位不脱离文档流（占据位置），元素的原来位置仍旧占据文档流位置
相对定位不改变元素的性质：块还是块，行还是行。

  <body>
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
  </body>
  #first {
            background-color: #1f87cc;
            width: 100px;
            height: 100px;

        }

   #second {
            background-color: red;
            width: 100px;
            height: 100px;
            position: relative;
            top: -100px;相对于自己在文档流中的原始位置的偏移量
            left: 100px;相对于自己在文档流中的原始位置的偏移量
            //top: -0px;元素在文档流里的原始位置
            //left: 0px;元素在文档流里的原始位置

        }

     #third {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }

absolute绝对

absolute绝对定位特点：
如果绝对定位开启，不设置偏移量(offset)，元素只是位置不变
绝对定位参考包含块元素定位
开始绝对定位，元素脱离文档流，元素不在占有文档流中的位置，其他元素会占有此元素原来文档流的位置。
开始绝对定位，元素的性质发生改变。
开启绝对定位，元素会提升一个层级。
开启绝对定位，如果最近的块元素(通常是父块元素)未设置相对定位，则是以根块元素进行过定位。
开启绝对定位，如果最近的块元素(通常是父块元素)设置相对定位，则以最近的块元素进行定位。
开启绝对定位，如果最近的块元素(通常是父块元素)未设置绝对定位，则是以根块元素进行过定位。
开启绝对定位，如果最近的块元素(通常是父块元素)设置绝对定位，则以最近的块元素进行定位。

  <body>
    <div id="first">第一个盒子</div>
	<div id="four"> 
	   块4
	   <div id="five">
	      块5
		  <div id="second">第二个盒子</div>
	   </div>
	</div>
	  
    <div id="third">第三个盒子</div>
  </body>
  #first {
            background-color: #1f87cc;
            width: 100px;
            height: 100px;

        }

        #second {
            background-color: red;
            width: 100px;
            height: 100px;
            position: absolute;//开启绝对定位后，此元素脱离文档流，元素不在占有文档流中的位置，其他元素会占有此元素原来文档流的位置。
            top: -0px;
            left: 0px;
		} 

        #third {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }

        #four {
            width: 300px;
            height: 300px;
            background-color: gold;
            /*position: absolute;//如果开启绝对，则子元素second的绝对定位相对于它*/
            /*position: relative;//如果开启绝对，则子元素second的绝对定位相对于它*/
        }

        #five {
            width: 200px;
            height: 200px;
            background-color: springgreen;
            /*position: absolute;//如果开启绝对，则子元素second的绝对定位相对于它*/
            /*position: relative;//如果开启绝对，则子元素second的绝对定位相对于它*/
        }

fixed绝对定位

fixed绝对定位特点：
固定定位也是一种绝对定位。所以具有绝对定位的大部分功能
固定定位，永远参考浏览器的视口进行定位。视口是显示的窗口，固定在某个位置不动，不会随着网页滚动条滚动。
开始固定定位，元素脱离文档流，元素不在占有文档流中的位置，其他元素会占有此元素原来文档流的位置。
开始固定定位，元素的性质发生改变。
开启固定定位，元素会提升一个层级。
开启固定定位，如果最近的块元素(通常是父块元素)未设置相对定位，则是以根块元素进行过定位。
开启固定定位，如果最近的块元素(通常是父块元素)设置相对定位，则以最近的块元素进行定位。
开启固定定位，如果最近的块元素(通常是父块元素)未设置绝对定位，则是以根块元素进行过定位。
开启固定定位，如果最近的块元素(通常是父块元素)设置绝对定位，则以最近的块元素进行定位。

  <body>
    <div id="first">第一个盒子</div>
	<div id="four"> 
	   块4
	   <div id="five">
	      块5
		  <div id="second">第二个盒子</div>
	   </div>
	</div>
	  
    <div id="third">第三个盒子</div>
  </body>
  #first {
            background-color: #1f87cc;
            width: 100px;
            height: 100px;

        }

        #second {
            background-color: red;
            width: 100px;
            height: 100px;
            position: fixed;//开启固定定位后，此元素脱离文档流，元素不在占有文档流中的位置，其他元素会占有此元素原来文档流的位置。
            top: 0px;
            left: 0px;
		} 

        #third {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }

        #four {
            width: 300px;
            height: 300px;
            background-color: gold;
            position：relative;
        }

        #five {
            width: 200px;
            height: 200px;
            background-color: springgreen;
      
        }

sticky粘滞定位

sticky粘滞定位：支持度不好，很多老版本浏览器不支持了。设定位置后，网页滚动到设置的位置就停止了。

 <body>
    <div id="first">第一个盒子</div>
	<div id="four"> 
	   块4
	   <div id="five">
	      块5
		  <div id="second">第二个盒子</div>
	   </div>
	</div>
	  
    <div id="third">第三个盒子</div>
  </body>

  #first {
            background-color: #1f87cc;
            width: 200px;
            height: 200px;
            position: sticky;
            top: 20px;

        }

        #second {
            background-color: red;
            width: 100px;
            height: 100px;
            position: fixed;

        }

        #third {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }

        #four {
            width: 300px;
            height: 300px;
            background-color: gold;

        }

        #five {
            width: 200px;
            height: 200px;
            background-color: springgreen;

        }

CSS的布局绝对定位元素位置

水平布局

  水平布局宽度=七个值的和=包含块的内容区宽度。
  margin.left+border.left+padding.left + width + padding.right + border.right + margin.right
  如果开启绝对定位开启，则多了left 和 right ，布局宽度变为9个值的和=包含块的内容区宽度
  left + margin.left+border.left+padding.left + width + padding.right + border.right + margin.right + right
  当上面的九个值中无auto，则相对定位中的left和right会自动调整。
  例如 left: 0; right: 0; 而 margin border padding都没有值，只有width有值=100px，包含块宽度为500px，则
  left +width +right =500px 中，right自动调增为400px。
  当上面的九个值中有auto，则可以设置auto的值有：margin、width、left、right。会自动调节auto的值
  例如  left: 0; right: 0; margin-left:auto，margin-right：auto，则水平居中
  例如  left: auto; right: auto; 则 margin-left:auto，margin-right：auto无效

垂直布局
  垂直布局=包含块的内容区高度。
  margin.top+border.top+padding.top + height + padding.bottom + border.bottom + margin.bottom
  如果开启绝对定位开启，则多了top 和 bottom，布局宽度变为
  top + margin.top+border.top+padding.top + height + padding.bottom + border.bottom + margin.bottom + bottom
  设置和水平布局相同。

<body>
<div class="box1">
    <div class="box2">
    </div>
</div>
</body>

<style type="text/css">
        .box1 {
            width: 500px;
            height: 500px;
            background-color: greenyellow;
            position: relative;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: #FAA53B;
            position: absolute;
            margin-left:auto;
            margin-right:auto;
            margin-top: auto;
            margin-bottom: auto;
       

            left: 0px;
            right: 0;
            top: 0;
            bottom: 0;
        }


    </style>

层级定位

层级定位是多个图层所处的位置，属性是z-index，值越大，则层级越高，越靠前。

<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
        body {
            font-size: 20px;
            text-align: center;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: springgreen;
            position: absolute;
            z-index: 1;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: #64c6ed;
            position: absolute;
            left: 50px;
            top: 50px;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            position: absolute;
            left: 100px;
            top: 100px;
            z-index: 2;
        }

爱吃面的猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS绝对定位的属性与区别

定位(position) --定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意 --使用position属性来设置定位可选值： static：默认值，元素是静止的没有开启定位 relative：开启元素的相对定位 absolute：开启元素的绝对定位 fixed：开启元素的团定定位 sticky：开启元素的粘泽定位relative相对定位特点：就是灵魂出窍，灵魂出...
复制链接

扫一扫