前端基础——定位

文章目录

    • 1.如何让盒子移动到指定的位置?
    • 2. 静态定位
    • 3.相对定位
    • 4.绝对定位
    • 5.实现页面布局
    • 6.固定定位
    • 7.定位层级
    • 8.盒子居中技巧
    • 9.实现二级菜单

1.如何让盒子移动到指定的位置?

(1) 采用margin的负值,破坏文档流进行移动。应用场景为头部内容和banner部分重叠
(2) 采用定位技术

.banner{
            width: 100%;
            height: 500px;
            margin: 0px;
            background-color: pink;
        }
        .first{
            width: 800px;
            height: 200px;
            margin:-100px auto 0;
            background-color: tomato;
        }
        h3{
            text-align: center;
        }

最后效果图如下:
前端基础——定位_第1张图片

2. 静态定位

  • 概念:默认每个标签都是静态定位
  • 语法:
position:static

3.相对定位

  • 概念:元素参考原来的位置,按照指定的方向移动
  • 语法:
position:relative

注意:只设置相对定位,元素没有任何影响,还需要设置偏移量

  • 偏移量(可以为负值,往反方向偏移):
    • top:距离参考位置上边缘的间距;
    • bottom:距离参考位置下边缘的间距;
    • left:距离参考位置左边缘的间距;
    • right:距离参考位置右边缘的间距;
  • 相对定位的特点
    • 只设置相对定位,元素没有任何影响;
    • 盒子原来的空间存在;
    • 设置相对定位的元素是参考原来的位置进行移动;
    • 设置相对定位的元素是破坏文档流进行移动;
    • 子元素设置相对定位,父元素进行移动时,子元素跟着相对移动,原因在于子元素的参考对象为父元素;
    • 通常配合绝对定位一起使用;

4.绝对定位

  • 概念:元素脱离文档流,按照指定的位置进行移动
  • 语法:
    注意:偏移量的设置方式和相对定位一样
position:absolute
  • 绝对定位的特点
    • 只设置绝对定位的元素会脱离文档流
    • 只设置绝对定位的元素,会在当前位置脱离文档流
    • 一旦设置偏移量,元素默认参考整个文档进行移动(设置了定位父级之后,参考最近的父级定位进行移动)
    • 原来的空间不再占用
    • 行内元素设置绝对定位以后,元素变为能够支持宽高
  • 如何同相对定位配合使用?
    • 概念
    1. 结构父级:在html代码结构中的父元素
    2. 定位父级:通过设置相对定位、绝对定位、固定定位后,决定了绝对定位的元素的参考位置
       .box1{
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: tomato;
            position: relative;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: absolute;
            right: 0px;
            bottom: 0px;

最终的效果图展示如下:以第二个盒子为参考位置,绝对定位到右下角的区域
前端基础——定位_第2张图片
注意:(1)多个定位父级,参考最近的定位父级

5.实现页面布局

        .box{
            width: 310px;
            height: 310px;
            border: 1px solid orange;
            margin: 50px auto 0px;
            position: relative;
        }
        .item{
            width: 100px;
            height: 100px;
            background-color: orange;
            text-align: center;
            line-height: 100px;
        }
        .box-1{
            position: absolute;
            left: 5px;
            top: 5px;
        }
        .box-2{
            position: absolute;
            right: 5px;
            top: 5px;
        }
        .box-3{
            background-color: #666;
            position: absolute;
            right: 105px;
            top: 105px;
        }
        .box-4{
            position: absolute;
            left: 5px;
            bottom: 5px;
        }
        .box-5{
            position: absolute;
            right: 5px;
            bottom: 5px;
        }

以大盒子为定位父级,设置相对参考位置,然后对每一个小盒子设置绝对定位,展示图如下:前端基础——定位_第3张图片

6.固定定位

  • 概念:元素会脱离文档流,按照指定的位置进行移动,会固定在页面上,不会随着滚动条移动
  • 语法:
position:fixed;
  • 特点:
    • 设置固定定位的元素会脱离文档流,并且覆盖在标准文档流之上
    • 会固定在页面上,不会随着滚动条滚动
    • 只设置固定定位,当前位置脱离固定在页面上,如果设置了偏移量,参考整个文档进行移动,固定在页面上
    • 原来的空间不再占用
  • 应用场景:头部导航固定、广告、弹出窗等

7.定位层级

  • 使用情况:当多个元素进行定位时(固定定位、相对定位、绝对定位),后面的元素会覆盖前面的元素(参考代码结构),若想要把某一定位元素优先显示在上层,则需要改变定位层级
  • 设置定位的层级,语法格式为z-index:number,其中的数字为整数,正负均可。默认值为auto,相当于0,数字越大,层级就越高,就越在上层显示
  • 当层级的数字相同时,按照代码结构规则进行排列,即后面定位的元素显示在前面定位的元素上面
  • 标准文档流的层级为0,若z-index:-1,则该层级在标准文档流下一层

8.盒子居中技巧

  • margin:auto auto:可以实现让盒子水平居中,但无法垂直居中。原因是auto是一个值,自适应,浏览器自动计算得出值。而一般垂直方向上的高度是内容撑开的,高度是在变化的,因此垂直方向上的auto是禁用的
  • 方法一:给父元素设置相对定位作为定位父级,然后给子元素设置绝对定位,四个方向均为0,即可水平垂直居中

<body>
    <div class="box1">
        <div class="box2">div>
    div>
body>

效果如下:
前端基础——定位_第4张图片

  • 方法二:采用绝对定位设置calc函数进行计算,计算公式为:calc(50%-小盒子高度/宽度的一半),其中50%是以左上角的那个点为计算依据。因此还要将子元素向左以及向右移动一半。但该方法仍然需要计算
    前端基础——定位_第5张图片
    代码编写如下:

  • 方法三:通过margin-top,margin-left设置calc函数进行计算,但这种方法只适用于正方形的盒子,矩形则不适用
    这是因为:margin、padding设置百分比时,每个方向都是参考父盒子的宽度,与高度无关

前端基础——定位_第6张图片

9.实现二级菜单

目标:
前端基础——定位_第7张图片
注意事项:

  • 当在导航区需要设置二级菜单时,因为会出现两次ul的情况,因此需要在第一个ul中设立子元素选择器,采用>符号
.nav .nav-ul > ul > li{
    /* 左右都有5px的间距 */
    padding: 0 5px;
    height: 39px;
    position: relative;
}
  • 文字的前后均有雪碧图标时,可以采用伪元素选择器中的::before,::after来实现,注意,伪元素选择器一定要配和content一起使用,否则没有效果。
    注意:一般来说,雪碧图是以背景图片的形式直接放入li中,但是当某一导航块儿前后均有图标时,无法使用单一的背景图片插入的方式,因此可以选择伪元素选择器进行设置
/* 超链接前面和后面有雪碧图,采用伪元素选择器 */
.nav .nav-ul  > ul  > li  > a::before{
    content: "";
    /* 为什么必须设置高度和宽度才能显示? */
    width: 30px;
    height: 30px;
    margin-top: 3px;
    /* border: 1px solid red; */
    background-image: url(../img/ico-index-sort.png);
    /* 同行显示 */
    float: left;
    margin-left: 15px;
}
  • 二级菜单设置步骤
    1. 在一级菜单的li中再添加ul,(最好添加上边框看效果)此时要注意一级菜单的ul的设置会影响二级菜单,应该将一级菜单的样式设置使用子元素选择器
    2. 设置ul、li、a的样式
    3. 在一级菜单的li中设置相对定位作为二级菜单绝对定位的参考元素,此时会出现一级菜单中的第二个li覆盖二级菜单的情况,因此此时应该调整定位层级,将第二级菜单的定位层级调高,使得它覆盖在一级菜单上面
    4. 设置悬浮时二级菜单才显示。首先,需要在二级菜单中设置不展示自己display:none,然后设置当鼠标悬浮:hover在一级菜单上时二级菜单出现display:block。其中ul应该是块级元素
.nav2{
    width: 120px;
    list-style: none;
    border: 2px solid #e51a45;
    background-color: white;
    /* 设置绝对定位 */
    position: absolute;
    top: 0px;
    left: 150px;
    /* 设置定位层级 */
    z-index: 2;
    /* 设置不悬浮时不展示二级菜单 */
    display: none;
}
.nav .nav-ul  > ul  > li:hover .nav2{
    /* 设置悬浮在一级菜单的li上时才显示块级元素二级菜单 */
    display: block;
}

你可能感兴趣的:(前端开发,css,html5)