定位。。。

最新推荐文章于 2024-09-09 13:46:41 发布

qq_59729459

最新推荐文章于 2024-09-09 13:46:41 发布

阅读量69

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_59729459/article/details/129133663

版权

决定定位后，margin：auto失效可以用百分比 left：50%

.box {
    /* 1. 绝对定位的盒子不能使用左右margin auto居中 */
    position: absolute;
    /* margin: 0 auto; */
    /* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    /* margin-left: -150px; */

    top: 50%;
    /* margin-top: -150px; */

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

    width: 400px;
    height: 300px;
    background-color: pink;
}

固定定位

子绝父想

.father{position：relative}

.son{

position：absolute

}

position：fixed //脱标不占位置

位置相对于浏览器框的行内块

元素成级关系

标准< 浮动<定位

如果是默认情况下，标签的书写是后来者居上

可以加入z-index：1 //层级关系啊，必须配合定位才可以生效

  <style>
        div {
            
            width: 200px;
            height: 200px;
        }

        .one {
            position: absolute;
            left: 20px;
            top: 50px;

            z-index: 1;

            background-color: pink;
        }

        .two {
            position: absolute;
            left: 50px;
            top: 100px;
            
            background-color: skyblue;
        }

        /* 
            默认情况下, 定位的盒子  后来者居上 ,
            z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0
            注意: z-index必须配合定位才生效
        */
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

光标

cursor：default 默认箭头

pointer 小手

text 工字形

move 十字光标