CSS布局：position定位

最新推荐文章于 2024-01-02 16:35:09 发布

路飞小朋友

最新推荐文章于 2024-01-02 16:35:09 发布

阅读量320

点赞数

分类专栏： ★ CSS

本文链接：https://blog.csdn.net/wozhangyi/article/details/106690138

版权

★ CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

定位和浮动区别（重点）

float 浮动

浮动元素会脱离文档流，但不会脱离文本流，浮动只有左右浮动
float 元素会浮起来，具有行内块的特点，但只能浮到第二层，表现为并列

position 定位

相对定位会浮起来，但不会脱离文档流和文本流，元素原本的位置会被保留，不会变为行内块
绝对和固定定位会浮起来，脱离文档流和文本流，会变为行内块元素
position 定位元素会浮起来，但会浮到不同层，后定位的元素永远比先定位的元素层级高（未使用没有z-index的情况下），表现为层叠

position 属性值

relative 相对定位，相对于其正常位置进行定位
absolute 绝对定位，相对于第一个设置定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位

relative 相对定位

使用细节

relative 相对定位，相对于其正常位置进行定位
相对定位会浮起来，但不会脱离文档流和文本流，元素原本的位置会被保留，不会变为行内块元素

使用场景

微调元素
相对定位常作为绝对定位的参考，子绝父相

relative 和 -margin的区别

-margin移动元素之后，元素不会浮起来，也不会脱离文档流，空出的位置别的元素可以占用
relative移动元素之后，元素会浮起来，但不会脱离文档流，空出的位置别的元素不能占用
疑问：相对定位后，box2和box1为何在一行了，不独占一行了吗？视觉上在一行，实际box2仍独占box1下边一行（可以理解为灵魂出窍，肉体不动）
疑问：-margin元素没脱标，那么它为何可以和box1放在一行？未解决！

在这里插入图片描述

代码示例

<style type="text/css">

    body{
        margin: 0px;
    }

    .div1{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }

    .div2{
        position: relative;/*相对定位：相对于自己原来的位置*/
        left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
        top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/

        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
</style>

<body>
<div class="div1">有生之年</div>
<div class="div2">狭路相逢</div>
</body>

absolute 绝对定位

使用细节

相对于上一个设置了定位 (绝对相对固定) 的父级元素 (可能是爷爷)来进行定位，如果找不到，则相对于body进行定位 (常用子绝父相)
如果绝对定位元素宽度设置为100%，该宽度是参考的那个元素的宽度，不一定是父元素的宽度
绝对和固定定位会浮起来，脱离文档流和文本流，会变为行内块元素
绝对定位的元素，会无视参考的那个父元素的 padding，在border内侧为参考点
子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的，但子绝父绝全部脱标，页面就不稳固，没有实战用途

使用场景

绝对定位非常适合用来做“压盖”效果
精灵图都使用绝对定位

动图演示
在这里插入图片描述

子绝父相子元素居中（仅适用于绝对用定位情况）

元素开启绝对定位后

规则类似于之前块元素的水平方向等式
水平方向等式需要添加 left 和 right 两个值
垂直方向等式需要添加 top 和 bottom 两个值，注意仅绝对定位的盒子有垂直方向等式，普通盒子没有

块元素绝对定位水平布局
left + magrn-left/right + border-left/right + padding-left/right + content + right = 包含块的内容区宽度
块元素绝对定位垂直布局
top + magrn-left/right + border-left/right + padding-left/right + content + bottom = 包含块的内容区高度

想要元素居中，还有一个条件，必须设置值偏移值，否则系统默认偏移值为auto，此时如果居中margin也为auto，系统会优先设置偏移值的auto，而忽略margin的auto，从而使居中设置失败

代码示例
在这里插入图片描述

fixed 固定定位

使用细节

固定定位与绝对定位唯一不同，就是相对浏览器窗口进行定位，无论页面如何滚动，这个盒子显示的位置不变
绝对和固定定位会浮起来，脱离文档流和文本流，会变为行内块元素

使用场景

我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位
我们经常能看到固定在网页顶端的导航条，可以用固定定位来做

代码示例返回顶部

<style type="text/css">
    a{
        position: fixed;
        bottom: 100px;
        right: 30px;
        width: 60px;
        height: 60px;
        background-color: gray;
        text-align: center;
        line-height:30px;
        color:white;
        text-decoration: none; /*去掉超链接的下划线*/
    }
</style>

代码示例导航条

<style type="text/css">  
  *{  
        margin: 0;  
  padding: 0;  
  }  
    body{  
        /*为什么要写这个？*/  
 /*不希望我们的页面被nav挡住*/  
  padding-top: 60px;  
  /*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/  
  _padding-top:0;  
  }  
    .nav{  
        position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 60px;  
  background-color: #333;  
  z-index: 99999999;  
  }  
    .inner_c{  
        width: 1000px;  
  height: 60px;  
  margin: 0 auto;  
  
  }  
    .inner_c ul{  
        list-style: none;  
  }  
    .inner_c ul li{  
        float: left;  
  width: 100px;  
  height: 60px;  
  text-align: center;  
  line-height: 60px;  
  }  
    .inner_c ul li a{  
        display: block;  
  width: 100px;  
  height: 60px;  
  color:white;  
  text-decoration: none;  
  }  
    .inner_c ul li a:hover{  
        background-color: gold;  
  }  
    p{  
        font-size: 30px;  
  }  
    .btn{  
        display: block;  
  width: 120px;  
  height: 30px;  
  background-color: orange;  
  position: relative;  
  top: 2px;  
  left: 1px;  
  }  
</style>  
  
<body>  
<div class="nav">  
 <div class="inner_c">  
 <ul> <li><a href="#">网页栏目</a></li>  
 <li><a href="#">网页栏目</a></li>  
 <li><a href="#">网页栏目</a></li>  
 <li><a href="#">网页栏目</a></li>  
 <li><a href="#">网页栏目</a></li>  
 <li><a href="#">网页栏目</a></li>  
 <li><a href="#">网页栏目</a></li>  
 <li><a href="#">网页栏目</a></li>  
 <li><a href="#">网页栏目</a></li>  
 <li><a href="#">网页栏目</a></li>  
 </ul> </div></div>  
</body>

sticky 粘滞定位

使用细节

粘滞定位和相对定位特点基本一致
不同的是粘滞定位可以在元素到达某个位置时将其固定
粘滞定位老版本浏览器不支持，目前用的不多

使用场景

京东的左侧导航栏用的就是粘滞定位

代码示例
在这里插入图片描述

z-index属性

z-index属性：表示谁压着谁，数值大的压盖住数值小的

有如下特性

属性值大的位于上层，属性值小的位于下层
z-index值没有单位，就是一个正整数，默认值是0，需配合position使用
如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人
定位了的元素，永远能够压住没有定位的元素
只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用
祖先元素的层级再高，也不会盖住其后代元素（水涨船高）
从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。

验证代码

1. 验证相对定位会浮起来，但不会脱离文档流和文本流，元素原本的位置会被保留，不会变为行内块

<style type="text/css">

    .out{
        border: black solid 5px;
        height: 200px;
        width: 200px;
    }

    .one{
        height: 100px;
        width: 100px;
        background: #4FEF10;
        position: relative;
    }

    .two{
        height: 50px;
        width: 50px;
        background: #00b3ff;
    }

    .three{
        height: 20px;
        width: 20px;
        background: #FF0099;
        position: relative;
    }
</style>

<body>
<div class="out">
    <div class="one">div1</div>
    <div class="two">div2</div>
    <span class="three">行内元素</span>
</div>
</body>

在这里插入图片描述
2. 绝对和固定定位会浮起来，但会浮到不同层，脱离文档流和文本流，会变为行内块元素

<style type="text/css">

    .out{
        border: black solid 5px;
        height: 200px;
        width: 200px;
    }

    .one{
        height: 100px;
        width: 100px;
        background: #4FEF10;
        position: absolute;
    }

    .two{
        height: 80px;
        width: 80px;
        background: #00b3ff;
        position: fixed;
    }

    .three{
        height: 60px;
        width: 60px;
        background: #FF0099;
        position: absolute;
    }
</style>

<body>
<div class="out">
    <div class="one">div1</div>
    <div class="two">div2</div>
    <span class="three">行内元素</span>
</div>
</body>

在这里插入图片描述
3. float 和 position混用什么效果？float浮动会脱离文档流，但不会脱离文本流

<!--思考
1. 将span改为div什么效果？
2. 将.a 的float改为 绝对定位 什么效果？-->

<style>
    .out{
        width: 400px;
        height: 300px;
        border: black solid 5px;
    }
    .a{
        width: 200px;
        height: 200px;
        background: #00b3ff;
        float: left;
        /*positio: fixed;*/
    }
    .b{
        position: absolute;
        width: 100px;
        height: 100px;
        background: yellow;
    }

</style>

<body>
<div class="out">
    <div class="a"></div>
    <span class="b">
        这是行内元素这是行内元素
    </span>
</div>
</body>

在这里插入图片描述
4. 验证绝对定位的元素，会无视参考的那个父元素的 padding，以border内侧为参考点

<style type="text/css">

    .out{
        border: black solid 5px;
        height: 200px;
        width: 200px;
        position: relative;
        padding: 100px;
    }

    .one{
        height: 120px;
        width: 120px;
        background: #4FEF10;
        position: absolute;
        /*absolute仅偏移的时候无视父元素的 padding*/
        /*top: 20px;*/
    }

    .two{
        height: 100px;mei
        width: 100px;
        background: #00b3ff;
        position: absolute;
    }

</style>

<body>
<div class="out">
    <div class="one"></div>
    <div class="two"></div>
</div>
</body>

在这里插入图片描述

路飞小朋友

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS布局：position定位

定位和浮动区别（重点）float 浮动浮动元素会脱离文档流，但不会脱离文本流，浮动只有左右浮动float 元素会浮起来，具有行内块的特点，但只能浮到第二层，表现为并列position 定位相对定位会浮起来，但不会脱离文档流和文本流，元素原本的位置会被保留，不会变为行内块绝对和固定定位会浮起来，脱离文档流和文本流，会变为行内块元素position 定位元素会浮起来，但会浮到不同层，后定位的元素永远比先定位的元素层级高（未使用没有z-index的情况下），表现为层叠position 属性
复制链接

扫一扫

专栏目录