position的4种定位以及居中的2种方法。

最新推荐文章于 2024-05-16 04:04:35 发布

tjh1998

最新推荐文章于 2024-05-16 04:04:35 发布

阅读量2.7w

点赞数 10

本文链接：https://blog.csdn.net/tjh1998/article/details/87923303

版权

参考文章：https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
1.z-index设置元素在垂直于显示屏（z轴方向上）的堆叠顺序，值大的元素发生重叠时会盖在值小的上面。
2.正常流（常规流）不会受到top，right,left,bottom的影响。
例如：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .one{position: static;
            width: 70px;
            height: 70px;
            top: 20px;
            left: 20px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="one"></div>
</div>
</body>

2.当position为relative时，不会脱离正常流。
注意：这里是相对于自身所在的位置而言的！
top:35px;
top为35px时，图片向下移动35px;
当top为-35px时，图片向上移动35px;
总结：值为正时，移动方向为相反方向；
值为负时，移动方向为去掉绝对值之后的移动方向。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container
        {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .one
        {position: relative;
            width: 70px;
            height: 70px;
            top: 20px;
            left: 20px;
            background-color: yellow;
        }
        .two
        {width:70px;
            height: 70px;
            background: green;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="one"></div>
    <div class="two"></div>
</div>
</body>
</html>

在这里插入图片描述
如图所示：黄色盒子虽然相对原本的位置发生了偏移，但依旧保持黑色框中原来的位置，说明黄色盒子并没有脱离正常流。（它的离开是暂时的，还保留着一席之地）
3.当position为绝对定位时：
绝对定位脱离了正常流（想要回家的孩子已经回不去了，它的位置被它后面的敌人已经占领了！）
绝对定位相对于已经定位好的父元素。
两种情况：

父元素中没有已经定位好的父元素（不包括position:static,其他定位方式均可以）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
    .parent{ width: 400px;height: 400px;background: #ccc;}
    .son{ width: 300px;height: 300px;background: #aaa;}
    span{position: absolute; right: 30px; background: #888;}//这里的right:30px；先找到父元素的右侧边框；距离右侧边框的左部距离为30px;
    </style>
</head>
<body>
<div class="parent">
    <div class="son">
        <span>什么？</span>
    </div>
</div>
</body>
</html>

在这里插入图片描述
2. 距离该元素最近的已经定位好的父元素
只修改了son,将其设置为相对定位

.son{ width: 300px;height: 300px;background: #aaa;position: relative;}

在这里插入图片描述
图片设置的为right:30px;即距离类名为son的盒子右侧的距离为30px;
综上所述，当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元素而定位，而父元素没有设置position属性或者设置了默认属性，那么定位属性会依据html元素来定位。
3.对绝对定位元素实现居中
1.水平居中：
left，right均设置为0；即子元素相对于父元素的左侧距离为0；父元素右侧距离为0；注意：不能直接对son设置margin：0 auto;因为此时son使用了绝对定位，是脱离文本流的。必须要先对其左右两侧设置为0才可。

<style>
        .parent
        {width: 200px;
            height: 200px;
            position: relative;
        background: blue;}
        .son
        {width: 80px;
         height: 80px;
        background-color: red;
            position: absolute;
            left: 0;
            right: 0;
        margin: 0 auto;}
    </style>
    <div class="parent">
    <div class="son"></div>
    </div>

在这里插入图片描述
2.垂直居中

.son{width: 80px;
            height: 80px;
        background-color: red;
            position: absolute;
            bottom: 0;
            top: 0;
        margin: auto 0;}

在这里插入图片描述
3.实现在中间：

 .son{width: 80px;
            height: 80px;
        background-color: red;
            position: absolute;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
        margin: auto;}

在这里插入图片描述
第四部分：position-sticky属性
（又称磁铁定位）
1.使用该定位元素时，发生偏移时，原位置并没有脱离普通流（常规流）
2.如果它的祖先元素有滚动，那么它的偏移标尺就是该祖先元素。
如果它的祖先元素没有滚动，那么它的偏移标尺就是视口栏。
视口：你眼睛所能看到的窗口。
3.设置bottom为10px之后，相对的是向上滚动的吸附效果，所以向下滚动时，是没有效果的，导航栏是会发生偏移的，设置top时，相对的是向下滚动的吸附效果，所以向上滚动时，也是没有效果的，导航栏也是会发生偏移的。(定位矩形)
当设置成top：10px 时，祖先元素滚动时，会首先定位到距离祖先元素上侧的10px处。当导航栏恰好碰到该定位点时，导航栏再向下移动时，就被固定住了，不会动了。
4.sticky是相对于它的已经定位的父元素进行定位的，
第五部分：position-fixed水平居中，垂直居中（在第三部分使用的这种方法：仅限于宽度和高度固定的模块；当高度不固定时，即为auto时，不能实现nav居中显示的功能！可以自己去实践呀！）相对于窗口进行了固定，而不像absolute一样，会跑！

 body部分
 <div class="page">
        <div class="nav">
            <div class="nav-li">慕课网的标题</div>
            <div class="nav-li">慕课网的标题</div>
            <div class="nav-li">慕课网的标题</div>
            <div class="nav-li">慕课网的标题</div>
            <div class="nav-li">慕课网的标题</div>
            <div class="nav-li">慕课网的标题</div>
        </div>
  </div>
  style部分
  <style>
        *{margin: 0;padding: 0;}
        .page{background: url("mooc.png") center no-repeat;
            width: 100%;height: 4043px;}
        .nav{position: absolute;
            left:50%;
            top: 50%;
          //注意，设置了各自为50%，并没有在中间。而是偏向右下方。
            margin-top:-126px;
            margin-left:-80px;
            width:160px;height:auto;}
        .nav-li
           {line-height: 40px;
            height: 40px;
            width: 160px;
            text-align: center;
            font-size: 16px;
            color:red;
            border-bottom: 2px solid black;}
    </style>

如图所示：大的黑色边框为body，红色的内容区域实现了水平和垂直居中的功能！
在这里插入图片描述

tjh1998

关注

10
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
position的4种定位以及居中的2种方法。

参考文章：https://www.cnblogs.com/zhuzhenwei918/p/6112034.html1.z-index设置元素在垂直于显示屏（z轴方向上）的堆叠顺序，值大的元素发生重叠时会盖在值小的上面。2.正常流（常规流）不会受到top，right,left,bottom的影响。例如：&amp;amp;lt;!doctype html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot
复制链接

扫一扫