前端基础（五.CSS 定位）

最新推荐文章于 2024-09-01 19:28:10 发布

小鱼干儿er

最新推荐文章于 2024-09-01 19:28:10 发布

阅读量168

点赞数 1

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

本文链接：https://blog.csdn.net/qq_45689821/article/details/113432982

版权

前端学习专栏收录该内容

39 篇文章 2 订阅

订阅专栏

五.CSS 定位

CSS定位
- 通过position定位
- 通过浮动(float)定位

CSS定位

CSS两种基本的用来定位的方式：

通过position定位

position有如下属性：

static 静态定位：
position的默认值，相当于没有定位，会忽略 top, bottom, left, right 或者 z-index 的声明。
relative 相对定位：
元素相对于本身进行位移。如此时left：20px；则会在元素左侧添加20像素，元素本身形状不变。
absolute 绝对定位：
元素从原来的文档流中删除，相对于包含该元素的元素进行定位，即相对于 static 定位以外的第一个父元素进行定位。如包含该元素的元素有position：relative；该元素有position：absolute；则该元素相对于包含该元素的元素，若该元素无包含该元素的元素，则相对于浏览器定位。
fixed 固定定位：
相对于浏览器定位

CSS定位常用的属性如下：

top: 定义了定位元素上外边距边界与其包含块左边界之间的偏移。通俗来讲即相对于包含块向下移动多少像素，或移动自身的百分之多少。
right: 定义了定位元素右外边距边界与其包含块左边界之间的偏移。通俗来讲即相对于包含块向左移动多少像素，或移动自身的百分之多少。
bottom: 定义了定位元素下外边距边界与其包含块左边界之间的偏移。通俗来讲即相对于包含块向上移动多少像素，或移动自身的百分之多少。
left: 定义了定位元素右外边距边界与其包含块左边界之间的偏移。通俗来讲即相对于包含块向左移动多少像素，或移动自身的百分之多少。
overflow: 当元素的内容溢出其区域时发生的事情。
z-index: 元素的堆叠顺序。
display: 规定元素应该生成的框的类型。
常用的值有：display:inline|block|inline-block|none;
分别对应：内联元素(默认值)|块级元素|行级块元素|不显示该元素

#div1{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: lightsalmon;
    top: 50px;
    left: 50px;
    box-shadow: 2px 2px 10px black;
    /* box-shadow: h-shadow v-shadow blur spread color inset; */
    /* 垂直阴影(必需) 水平阴影(必需) 模糊距离(可选) 阴影尺寸(可选) 阴影颜色(可选) 内部阴影(可选)(outset外部阴影 默认值) */
}
#div2{
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: rgb(42, 189, 157);
    bottom: 20px;
    left: 20px;
    z-index: -1;
}
#div3{
    width: 200px;
    height: 200px;
    background-color: lightskyblue;
    overflow: hidden;
}

<div id="div1">
   div1
   <div id="div2">
       div2
   </div>
   <div id="div3">
       div3
   测试overflow测试overflow测试overflow测试overflow测试overflow测试overflow测试overflow
   测试overflow测试overflow测试overflow测试overflow测试overflow测试overflow测试overflow
   测试overflow测试overflow测试overflow测试overflow测试overflow测试overflow测试overflow
   测试overflow测试overflow测试overflow测试overflow测试overflow测试overflow测试overflow
   测试overflow测试overflow测试overflow测试overflow测试overflow测试overflow测试overflow
   </div>
</div>

position定位测试

通过浮动(float)定位

CSS的浮动可以向左或向右浮动，其浮动时，会脱离文档流，将原来所占空间释放，浮动至包含框的边缘。

div{
	 width: 100px;
     height: 100px;
 }
 #div{
     width: 300px;
     height: 300px;
     background-color: coral;
 }
 #div1{
     background-color: cornflowerblue;
     float: right;
 }
 #div2{
     background-color: hotpink;
 }
 #div3{
     background-color: lightseagreen;
 }

<div id="div">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

float测试
若将div1改为float: left，则会因脱离文档流而覆盖住div2，而div2中的文字则会掉落下来：
float测试2
浮动会导致父元素塌陷
当子元素未设置浮动时：

        #div{
            width: 300px;
            /* height: 100px; */
            background-color: lightseagreen;
            /* overflow: hidden; */
        }
        #div1{
            width: 100px;
            height: 100px;
            background-color: lightsalmon;
            /* float: left; */
        }
        #div2{
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
            /* float: right; */
        }
        #div3{
            clear: both;
        }
        .clearfix::after{
            content:"";
            display: block;
            clear: both;
            /*  1.::after使用了伪元素，
                  即在元素的后面添加一个“伪”的元素 
                2.使用伪元素时，必须设置content，
                  因为要设置伪元素的内容是什么，
                  而我们只是为了清除浮动，所以设置为空
                3.我们要将其设置为块级元素，
                  此时他的宽高就可以自动和父元素一致
                  从未解决浮动塌陷
            */
        }

    <div id="div">
    <!-- <div id="div" class="clearfix"> -->
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <!-- <div id="div3"></div> -->
    </div>

测试浮动塌陷 -无浮动时
如上图，当父元素没有高度时，会因为子元素在其内撑开而拥有高度，其高度等于子元素的高度100px+100px=200px 。

而当为子元素分别添加浮动后,由于子元素脱离文档流，使父元素失去高度，即为高度塌陷：
测试浮动塌陷 -有浮动时
解决这一问题，有如下方法：（代码例子如上面浮动塌陷代码中的注释）

父元素添加高度
父元素设置overflow:hidden;
浮动的元素下边再添加一个元素，并给添加的元素设置clear:both
clear属性：规定元素不允许出现浮动元素
clear：none|left|right|both|inherit;默认值，允许两侧出现浮动|不允许左侧出现浮动|不允许右侧出现浮动|不允许两侧出现浮动|继承父元素clear属性（其中clear:both;最常用）
为父元素添加clearfix类，如下：

.clearfix::after{
            content:"";
            display: block;
            clear: both;
            /*  1.::after使用了伪元素，
                  即在元素的后面添加一个“伪”的元素 
                2.使用伪元素时，必须设置content，
                  因为要设置伪元素的内容是什么，
                  而我们只是为了清除浮动，所以设置为空
                3.我们要将其设置为块级元素，
                  此时他的宽高就可以自动和父元素一致
                  从未解决浮动塌陷
            */
        }