CSS位置定位

最新推荐文章于 2024-08-28 17:54:22 发布

qq_73695533

最新推荐文章于 2024-08-28 17:54:22 发布

阅读量303

点赞数 8

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_73695533/article/details/140687929

版权

1.相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 310px;
            height: 310px;
            padding: 5px;
            border: 1px solid red;
            margin: 0 auto;
        }
        a{
            text-decoration: none;
            color: white;
            background-color: violet;
            display: inline-block;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }

        .div1{
            position: relative;
            left: 5px;
            top: 5px;
        }
        .div2{
            position: relative;
            top: -95px;
            left: 205px;
        }
        .div3{
            position: relative;
            left: 5px;
            top: 5px;
        }
        .div4{
            position: relative;
            top: -95px;
            left: 205px;

        }
        .div5{
            position: relative;
            left: 105px;
            bottom: 295px;

        }
        .a5{
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="div1">
        <a href="#">链接1</a>
    </div>
    <div class="div2">
        <a href="#">链接2</a>
    </div>
    <div class="div3">
        <a href="#">链接3</a>
    </div >
    <div class="div4">
        <a href="#">链接4</a>
    </div>
    <div class="div5">
        <a href="#" class="a5">链接5</a>
    </div>
</div>
</body>
</html>



总结：相对定位 position:relative；

相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

left:5px

top:5px

right:5px

bottom:5px

2.绝对定位

定位：基于。。。定位，上下左右~

1.没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3.在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它仍然在标准文档流中，原来的位置不会被保留

3.固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位：相对于浏览器*/
             width: 100px;
             height: 100px;
             background-color: red;
            position: absolute;
             right: 0;
             bottom: 0;
            border: 1px solid red;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background-color: #21D4FD;
            position: fixed;/*固定定位*/
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>
    div1
</div>
<div>
    div2
</div>
</body>
</html>

总结：固定定位会固定到浏览器的页面上。

4.z-index

.tipText{
    position: absolute;
    top: 10px;
    z-index: 999;/*层级优先级*/
}

总结：z-index:层级数越高就约在最上面。

qq_73695533

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS位置定位

总结：相对定位 position:relative；相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留left:5pxtop:5pxright:5pxbottom:5px。
复制链接

扫一扫