首页 > 其他分享> 文章详细

css之四种定位详解

2022-02-05 09:31:26 阅读：294 来源： 互联网

标签：定位盒子父级 50% 详解 css 宽度四种 left

设置定位方式：

属性名：posotion

静态定位：static（不定位）

相对定位：relative

绝对定位：absolute

固定定位：fixed

2.设置偏移值，水平和垂直方向各选一个使用

水平：right left 数字+px

垂直：top bottom 数字+px

（1）相对定位：有上下左右四个同时存在，以left和top为准。

1.占有原来的位置

2.仍然具体标签原有的显示模式特点

3.改变位置参照自己原来的位置

（2）绝对定位：拼爹型定位，相对于非静态定位的父元素进行定位移动（定义）

先找已经定位的父级，如果有这样的父级就以这个父级为参照物

有父级，但没有定位，以浏览器窗口为参照进行定位

1.脱标，不占标准流的位置

2.改变标签的显示模式特点：行内块

3.绝对定位的盒子不能使用左右margin auto居中

（3）子绝父相：

绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照定位

（4）绝对定位居中：

 <style>
        .box{
            position: absolute;
            left:50%;
            margin-left:-150px;

            bottom:50%;
            margin-bottom:-150px;

            
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
 </style>

left:50%; 整个盒子移动到浏览器中间偏右的位置

margin-left:-150px; 把盒子向左侧移动:自己宽度的一半

（自动版）transform:translate(-50%,-50%)

位移：自己宽度高度的一半

<style>
        .box{
            position: absolute;
            top:50%;
            left:50%;
            

            /* 位移：自己宽度高度的一半 */
            transform: translate(-50%,-50%);


            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
    </style>

绝对定位的盒子显示模式具备行内块特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸为0。

子绝父相的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner{
            position: relative;
            margin:0 auto;
            width: 1226px;
            height: 600px;
        }
        .mask{
            position: absolute;
            left: 0;
            bottom: 0;
            /* 绝对定位的盒子显示模式具备行内块特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸为0 */
            width: 1226px;
            /* 如果父级和子级的宽度相同，可以写成width:100%; */
            height: 120px;
            background-color: rgba(0,0,0,.5);
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="./bg.jpg" alt="">
        <!-- mask遮罩 -->
        <div class="mask"></div>
    </div>
   
</body>
</html>

样图：

（5）固定定位：

position:fixed

1.改变位置参考浏览器窗口

2.脱标，不占位置

3.具备行内块特点，可以改变宽高

元素层级问题 - > 不同布局方式元素的层级关系：标准流 < 浮动 < 定位

不同定位之间的层级关系：相对、绝对、固定默认层级相同（默认情况下，定位的盒子后来者居上

z-index:整数; 取值越大，显示顺序越靠上，z-index的默认值是0 z-index必须要配合定位才生效）

标签：定位,盒子,父级,50%,详解,css,宽度,四种,left
来源： https://blog.csdn.net/weixin_48501207/article/details/122770615

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css之四种定位详解