绝对定位、相对定位、固定定位,有父级的定位,z轴,溢出

01.绝对定位absolute

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                margin: 0;
            }
            div{
                width: 100px;
                height: 100px;
            }
            #box1{
                background: yellow;
            }
            #box2{
                background: green;
                position: absolute;
                left:100px;
            }
            #box3{
                background: blue;
            }
        </style>
    </head>
    <body>
        <!-- 
            定位:
                绝对定位:absolute :父级没有定位时,相对文档定位,脱离文档流提升层级
                相对定位:relative
                固定定位:fixed
                -----------------
                没有(默认)定位:static
                
            只要有定位,就可以使用扩展样式
            left right
            top bottom
         -->
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </body>
</html>

02.相对定位relative

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                margin: 0;
            }
            div{
                width: 100px;
                height: 100px;
            }
            #box1{
                background: yellow;
            }
            #box2{
                background: green;
                position: relative;
                left:100px;
            }
            #box3{
                background: blue;
            }
        </style>
    </head>
    <body>
        <!-- 
            定位:
                绝对定位:absolute :父级没有定位时,相对文档定位,脱离文档流提升层级
                相对定位:relative :相对自己的定位,不脱离文档流,提升层级
                固定定位:fixed :
                -----------------
                没有(默认)定位:static
                
            只要有定位,就可以使用扩展样式
                left right
                top bottom
         -->
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </body>
</html>

03.固定定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                margin: 0;
            }
            div{
                width: 100px;
                height: 100px;
            }
            #box1{
                background: yellow;
            }
            #box2{
                background: green;
                position: relative;
                left:100px;
            }
            #box3{
                background: blue;
            }
        </style>
    </head>
    <body>
        <!-- 
            定位:
                绝对定位:absolute :父级没有定位时,相对文档定位,脱离文档流提升层级
                相对定位:relative :相对自己的定位,不脱离文档流,提升层级
                固定定位:fixed :针对窗口定位,脱离文档流,提升层级
                -----------------
                没有(默认)定位:static
                
            只要有定位,就可以使用扩展样式
                left right
                top bottom
         -->
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </body>
</html>

04.有父级的定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 960px;
                height: 400px;
                background: #0000FF;
                margin: 0 auto;
                /* 让子集元素针对自己定位 */
                position: relative;
            }
            #div1{
                width: 80px;
                height: 80px;
                background: green;
                position: absolute;
                left: 300px;
            }
            #div2{
                width: 80px;
                height: 80px;
                background: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <!-- 
         如果父级有定位
            绝对定位的子集元素都是针对父级在定位
         -->
        <div id="box">
            <div id="div1"></div>
            <div id="div2"></div>
        </div>
    </body>
</html>

05.z轴-index

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                position: relative;
            }
            #div1{
                width: 100px;
                height: 100px;
                border: 1px solid deepskyblue;
                position: absolute;
                background: red;
                z-index: 1;
                font-weight: bold;
                opacity: 0.4;
            }
            #div2{
                width: 100px;
                height: 100px;
                background: #000;
                position: absolute;
                left:8px;
                top: 8px;
                z-index: -10;
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="div1">法国法国是</div>
            <div id="div2"></div>
        </div>
    </body>
</html>

06.溢出overflow

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 100px;
                border: 1px solid red;
                overflow: auto;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div>女裤女靴子绿领巾的攻击体魄大放大放大腐蚀毒粉阿瑟 挖土机颇强条狗咯刚看了你这卡里现在;垃圾狗滚咯破乳剂跳舞机公开栏女考虑现在你不考虑;自己内心的来看;  </div>
    </body>
</html>

当当图书网(作业)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                font-size: 0;
            }
            ul{
                list-style: none;
            }
            a{
                text-decoration: none;
            }
            img{
                border:0;
            }
            #logo,#nav{
                width: 960px;
                margin: 3px auto;
            }
            #nav .main{
                width: 100%;
                background: url(image/menuBg.jpg) ;
            }
            #nav{
                position: relative;
            }
            #nav .main li{
                float: left;
                height: 36px;
                line-height: 36px;
                }
            #nav .main li a{
                font-size: 12px;
                color: #fff;
                font-family: Verdana,"宋体";
                margin: 0 16px;
            }
            #nav .extra{
                width: 248px;
                position: absolute;
                right: 0;
                top: -30px;
                background: #eafffa;
                border: 1px solid #c8ece3;
                border-bottom: 0;
            }
            #nav .extra li{
                margin:0 10px;
                float: left;
                background: #eafffa;
            }
            #nav .extra li a{
                line-height: 29px;
                font-size: 12px;
                color: #7b7b7b;
            }
            #nav .szfq{
                position: absolute;
                top: -42px;
                right: 194px;
            }
        </style>
    </head>
    <body>
        <div id="logo">
            <img src="image/logo.jpg" >
        </div>
        <div id="nav">
            <ul class="main">
                <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>
                <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>
                <li><a href="">家电</a></li>
                <div style="clear:both;"></div>
            </ul>
            <ul class="extra">
                <li><a href="">尾品汇</a></li>
                <li><a href="">当当优品</a></li>
                <li><a href="">数字馆</a></li>
                <li><a href="">都看阅器</a></li>
                <div style="clear:both;"></div>
            </ul>
            <div class="szfq">
                <img src="image/icon_count.png" alt="">
            </div>
        </div>
    </body>
</html>

fly社区(作业)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            p{
                line-height: 0;
            }
            body{
                background: #f2f2f2;
            }
            
            a{
                text-decoration: none;
            }
            #nav{
                line-height: 50px;
                width: 640px;
                background: #ffffff;
                border-radius: 3px;
            }
            #nav .title{
                font-size: 14px;
                text-indent: 23px;
                font-family: "微软雅黑";
                color: #666666;
                }
            #nav .sub{
                height: 75px;
                border-top: 1px dashed #e9e9e9;
            }
            img{
                margin: 15px;
                height: 45px;
                width: 45px;
            }
            
            #nav .hangone{
                
            }
            #nav .hangtwo{
                
            }
            .sub{
                position: relative;
            }
            .taolun{
                line-height: 13px;
                font-size: 12px;
                position: absolute;
                top: 0px;
                left: 00px;
            }
        </style>
    </head>
    <body>
        <div id="zhiding">
            <ul id="nav">
                <li class="title">置顶</li>
                <li class="sub"><img src="../../../20190401/bitbug_favicon.ico" alt="">
                            <span class="taolun">讨论</span>
                            <a href="javascript:;">鞠婧祎的白蛇传好好看</a>
                            <span class="jingtie">精帖</span>
                            <a href="javascript:;">姜政</a>
                            <span class="vip">VIP3</span>
                            <span class="date">2019-3-3</span>
                            <span class="feiwen">悬赏飞吻</span>
                            <span class="huida">回答</span>
                </li>
                <li class="sub"><img src="../../../20190401/bitbug_favicon.ico" alt=""></li>
                <li class="sub"><img src="../../../20190401/bitbug_favicon.ico" alt=""></li>
            </ul>
        </div>
    </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容