HTML学习笔记——定位网页元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>position</title>
<!--     总结:
        相对定位：1.相对于自己出事位置来定位2.元素发生偏移后,原来的位置会给保留下来3.层次提高4.一般不常用,多配合绝对定位来用

        绝对定位：1.相对于父级的位置来定位2.元素偏移后原来的位置不被保留3.层级提高4.设置绝对定位的元素是脱离文档流的5.一般用于,下拉菜单、焦点图轮播、弹出数字气泡、特别花边等

        固定定位：1.相对于浏览器窗口来定位的2.偏移量不会随滚动条移动3一般用于网页中左右两边定位广告或者导航 -->

    <style>
        body{
            padding:10px;
        }
        div {
            margin:10px;/* 外边距 */
            padding:5px;/* 内边距 */
            font-size:12px;
            line-height:25px;/* 行高 */
        }
        #father{
            border:1px solid yellow;
            position:relative;/* 相对定位:相对于原来的位置来定位的,不会对其他元素产生影响,层级提高 */

        }
        #first{
            border:1px solid blue;
            position:relative;
            top: 100px;
            right:30px;
        }
        #second{
            border:1px solid pink;
            position:absolute;/* 绝对定位:如果没有定位父级,相对于浏览器窗口定位,若有就按照父类定位 */
            top: 0px;
            right:0px;
        }
        #third{
            height:100px;
            border:1px solid green;
            position:fixed;/* 固定定位:相对于浏览器窗口定位 */
            top:50%;
            right:0;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">
        第一个盒子
    </div>
    <div id="second">
        第二个盒子
    </div>
    <div id="third">
        第三个盒子
    </div>
</div>
</body>
</html>
HTML学习笔记——定位网页元素

猜你喜欢
