CSS定位（position）

最新推荐文章于 2024-04-21 22:38:54 发布

努力的拾壹

最新推荐文章于 2024-04-21 22:38:54 发布

阅读量117

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45608986/article/details/119036622

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.static 自然模型

特点：

忽略 top bottom left right 元素的修改
若两个相邻的元素设置了外边距，则最终的外边距=两者外边距中最大的
具有固定元素width和height值得元素，如果把左右边距设置成auto，则左右边距会自动扩大占满剩余得宽度，造成得效果就是这块水平居

<style>
        .block{
            
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 2px solid blue;
            box-sizing: border-box;
        }

        .block:nth-child(2){
            border: 2px solid red;
            position: static;
        }
    </style>
    <title>Document</title>
</head>
<body>

    <div class="block">A</div>
    <div class="block">B</div>
    <div class="block">C</div>
    <div class="block">D</div>
    
</body>

加入

position: relative;
    top: 10px;

.block:nth-child(2){
    border: 2px solid green;
    margin-left: auto;
    margin-right: auto;
        }

2. relative 相对定位

特点：

可以使用top/right/bottom/left实现相对定位的祖先元素
相对定位的元素不会离开常规流
任何元素都可以设置relative，绝对定位的后代都可以进行相对于它进行绝对定位
可以使用浮动元素发生偏移，并控制它们的堆叠顺序

<style>
        .block{
            width: 80px;
            height: 80px;
            line-height: 80px;
            border: 2px solid pink;
            text-align: center;
        }
        
    </style>
    <title>Document</title>
</head>
<body>
    <div class="block">A</div>
    <div class="block">B</div>
    <div class="block">C</div>
</body>

.block:nth-child(1){
     top: 20px;
     position:relative;
     border:  solid blue;
        }

.block{
            width: 80px;
            height: 80px;
            line-height: 80px;
            border: 2px solid pink;
            text-align: center;
            float: left;
        }
        .block:nth-child(1){
            top: 20px;
            position:relative;
            border:  solid blue;
        }

可以在浮动元素里改变块的位置

控制堆叠的顺序

.block{
            width: 80px;
            height: 80px;
            line-height: 80px;
            border: 2px solid pink;
            text-align: center;
            float: left;
            z-index: 9;
        }
        .block:nth-child(2){
            top: 0px;
            left: -80px;
            position:relative;
            border:   blue;
        }

3.absolute 绝对定位

特点：

脱离常规流
设置尺寸要注意：百分比比的谁？——离最近定位的祖先元素

<style>
        .per{
     width: 300px;
     height: 300px;
     background: red;
     margin-left:200px;
     margin-top: 200px;
     position: relative;
   }

   .son{
     position: absolute;
     width: 100px;
     height: 100px;
     background: blue;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto auto;
   }
   </style>
</head>
<body>
    <div class="per">
    <div class="son"></div>
</body>

4.fixed 固定定位

<style>
        body{
            height: 1000px;
            background: lightblue;
        }
        .block{
            
            width: 100px;
            height: 100px;
            line-height: 80px;
            border: 2px solid black;
            text-align: center;
        }
        .block:nth-child(1){
            position:absolute;
            top: 200px;
            left: 20px;
        }
        .block:nth-child(2){
            position:fixed;
            top: 200px;
            left: 20px;
        }
   </style>
</head>
<body>
    <div class="block">固定定位</div>
    <div class="block">决定定位</div>

5.sticky 磁铁定位

努力的拾壹

关注

0
点赞
踩
0

收藏

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

1.static 自然模型特点：忽略 top bottom left right 元素的修改若两个相邻的元素设置了外边距，则最终的外边距=两者外边距中最大的具有固定元素width和height值得元素，如果把左右边距设置成auto，则左右边距会自动扩大占满剩余得宽度，造成得效果就是这块水平居<style> .block{ width: 50px; height: 50px;
复制链接

扫一扫

专栏目录