继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS3学习笔记(6)-定位

慕数据5191420
关注TA
已关注
手记 14
粉丝 0
获赞 1

定位

主要内容

  • 相对定位
  • 绝对定位
  • 固定定位

相对定位

相对定位:盒子可以相对自己原来的位置进行位置调整,称为相对定位。

相对定位的性质

相对定位的元素,会在“老家留坑”,本质上仍然是在原来的位置,只不过渲染在新的地方而已,渲染的图形可以比喻成,不会对页面其他元素产生任何影响“影子”。

相对定位的用途

  • 相对定位用来微调元素位置

  • 相对定位的元素,可以当做绝对定位的参考盒子
    例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            nav {
                width: 960px;
                height: 40px;
                margin: 40px auto;
            }
            nav ul {
                list-style: none;
            }
            nav ul li{
                float: left;
                width: 120px;
                height: 40px;
                text-align: center;
                line-height: 40px;
            }
            nav ul li a {
                display: block;
                width: 120px;
                height: 40px;
                background-color: orange;
                color: white;
                text-decoration: none;
            }
            nav ul li a:hover {
                border-top: 3px solid red;
                position: relative;
                top: -3px;
                background-color: gold;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li>
                    <a href="">网站栏目</a>
                </li>
                <li>
                    <a href="">网站栏目</a>
                </li>
                <li>
                    <a href="">网站栏目</a>
                </li>
                <li>
                    <a href="">网站栏目</a>
                </li>
                <li>
                    <a href="">网站栏目</a>
                </li>
                <li>
                    <a href="">网站栏目</a>
                </li>
                <li>
                    <a href="">网站栏目</a>
                </li>
                <li>
                    <a href="">网站栏目</a>
                </li>
            </ul>
        </nav>
    </body>
    </html>
    

相对定位的位置描述词

  • left:盒子右移

  • right:盒子左移

  • top:盒子下移

  • bottom:盒子上移

    值可以为负数,即往规定方向相反移动

绝对定位

绝对定位:盒子可以在浏览器中以坐标进行位置精准描述,拥有自己的绝对位置

绝对定位的位置描述词

  • left:到左边的距离
  • right:到右边的距离
  • top:到上边的距离
  • bottom:到下边的距离

ps: 如果用top描述,那么参考点就是页面的左上角,而不是浏览器的左上角;如果用bottom描述,那么参考点就是浏览器首屏窗口尺寸(好好理解“首屏”二字),对应的页面的左下角。如图所示:
图片描述

绝对定位脱离标准文档流

绝对定位的元素脱离标准文档流,将释放自己的位置,对其他元素不会产生任何干扰,而是对它们进行压盖。绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block就可以设置宽、高了。

绝对定位的参考盒子

  • 绝对定位的盒子并不是永远以浏览器作为基准点。

  • 绝对定位的盒子会以自己祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点。这个盒子通常是相对定位的,所以这个性质也叫作“子绝父相”。

绝对定位的盒子垂直居中

position: absolute;
top:50%;
margin-top: -自己高度一半;

堆叠顺序z-index属性

z-index属性是一个没有单位的正整数,数值大的能够压住数值小的

有如下特性:

  1. 属性值大的位于上层,属性值小的位于下层。
  2. z-index值没有单位,就是一个正整数。默认的z-index值是0。
  3. 如果大家都没有z-index值,或者z-index值一样,那么在HTML代码里写在后面,谁就在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
  4. 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的元素不能用
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 在body标签中box2在box1后面,所以默认box2在上层,box1在下层 
            设置了z-index属性可以使box1压在box2上面*/
        .box1 {
            width: 300px;
            height: 300px;
            background-color: orange;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 9999;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: blue;
            position: absolute;
            top: 200px;
            left: 200px;
            z-index: 999;
        }
    </style>
</head>

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

</html>

固定定位

固定定位:就是相对浏览器窗口进行定位。无论页面如何滚动,这个盒子显示的位置不变。

固定定位注意事项

  • 固定定位只能以页面为参考点,没有子固父相这个性质
  • 固定定位脱离标准文档流
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP