定位

zhuqian88

于 2019-11-07 16:39:16 发布

阅读量69

点赞数

分类专栏： css 文章标签：定位 css

本文链接：https://blog.csdn.net/weixin_44516932/article/details/102958071

版权

css 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

绝对定位

定位场景: 只要页面多个元素需要发生重叠时, 就可以使用定位
常用定位:
- 绝对定位
- 相对定位
- 固定定位
学习任何一个定位, 都必须掌握两点:
- 位置是否保留
- 原点
绝对定位:
- position: absolute
- 不保留原来的位置
- 基于网页第一页的四个角落

<style>
        .box{width: 100px;height: 100px;}
        .box1{background: #E99D9D;}
        .box2{background: #77ADF0;}
        .box3{background: #79F67C; width: 150px; height: 150px;}
        .box4{background: #ECF57A; height: 2000px;}
        .box2{
            position: absolute;
            /* left: 0px; */
            /* top: 0px; */
            right: 0px;
            bottom: 0px;
        }
</style>

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box4"></div>

相对定位

position: relative

保留原来的位置
基于原来位置的四个角落

<style>
        .box{width: 100px;height: 100px;}
        .box1{background: #E99D9D;}
        .box2{background: #77ADF0;}
        .box3{background: #79F67C; width: 150px; height: 150px;}
        .box4{background: #ECF57A; height: 2000px;}
        .box2{
            position: relative;
            /* left: 5px; */
            /* top: 5px; */
            right: 5px;
            bottom: 5px;
        }
</style>

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box4"></div>

定位技巧

后辈元素(定位) 以祖辈元素(定位)的四个角作为原点

<link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .b1{
            width: 600px;
            height: 600px;
            border: 5px solid black;
        }
        .b2{
            width: 400px;
            height: 400px;
            border: 5px solid red;
            margin: 100px auto;
        }
        .b3{
            width: 200px;
            height: 200px;
            border: 5px solid blue;
            /* margin: 100px auto; */
        }
        .b4{
            width: 50px;
            height: 50px;
            border: 5px solid green;
            margin: 75px auto;
        }
        .b1{
            /* position: relative; */
        }
        .b3{
            /* position: absolute; */
            /* top: 0; */
            /* left: 0; */
        }
        .b2{
            position: relative;
        }
        .b3{
            position: absolute;
            top: 0;
            left: 0;
        }
        /* 小米Banner 练习 */
        body,ul{margin: 0; padding: 0; }
        li{list-style:none;}
        .banner{
            width: 1226px;
            height: 460px;
            /* border: 4px solid red; */
            margin: 50px auto;
            position: relative;
        }
        .banner .menu{
            width: 234px;
            height: 460px;
            background: rgba(0,0,0,0.6);
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .banner .menu ul {
            padding: 20px 0;
        }
        .banner .menu ul li{
            height: 42px;
            line-height: 42px;
            color: #fff;
            padding-left: 30px;
            font-size: 14px;
            font-family: 微软雅黑;
        }
        .banner .menu ul li span:last-of-type{
            float: right;
            padding-right: 20px;
            font-weight: bold;
            color: #ccc;
        }
        .banner .menu ul li:hover{
            background: #ff6700;
            cursor: pointer;
        }
        .banner .left{
            width: 41px;
            height: 69px;
            /* border: 1px solid red; */
            background: url('./resource/slides.png') -83px 0px;
            position: absolute;
            left: 234px;
            top: 40%;
        }
        .banner .left:hover{
            background-position: 0 0;
        }
</style>

<div class="b1">
        <div class="b2">
            <div class="b3">
                <div class="b4"></div>
            </div>
        </div>
    </div>
    <hr>
    <div class="banner">
        <img src="./resource/banner.jpg" width="1226" >
        <div class="menu">
            <ul>
                <li> <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> </li>
                <li> <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> </li>
                <li> <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> </li>
                <li> <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> </li>
                <li> <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> </li>
                <li> <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> </li>
                <li> <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> </li>
                <li> <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> </li>
                <li> <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> </li>
                <li> <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> </li>
            </ul>
        </div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="list"></div>
</div>

完善Banner

<link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* 小米Banner 练习 */
        body,ul{margin: 0; padding: 0; }
        li{list-style:none;}
        .banner{
            width: 1226px;
            height: 460px;
            /* border: 4px solid red; */
            margin: 50px auto;

            position: relative;
        }
        .banner .menu{
            width: 234px;
            height: 460px;
            background: rgba(0,0,0,0.6);

            position: absolute;
            left: 0px;
            top: 0px;
        }
        .banner .menu ul {
            padding: 20px 0;
        }
        .banner .menu ul li{
            height: 42px;
            line-height: 42px;
            color: #fff;
            padding-left: 30px;
            font-size: 14px;
            font-family: 微软雅黑;
        }
        .banner .menu ul li span:last-of-type{
            float: right;
            padding-right: 20px;
            font-weight: bold;
            color: #ccc;
        }
        .banner .menu ul li:hover{
            background: #ff6700;
            cursor: pointer;
        }
        .banner .menu .children {
            min-width: 265px;
            height: 460px;
            background: #000;
            display: none;
            z-index: 100;
            position: absolute;
            top: 0;
            left: 234px;
        }
        .banner .menu ul li:hover  .children {
            display: block;
        }
        .banner .left{
            width: 41px;
            height: 69px;
            /* border: 1px solid red; */
            background: url('./resource/slides.png') -83px 0px;
            position: absolute;
            left: 234px;
            top: 40%;
        }
        .banner .left:hover{
            background-position: 0 0;
        }
    </style>

<div class="banner">
        <img src="./resource/banner.jpg" width="1226" >
        <div class="menu">
            <ul>
                <li>
                     <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> 
                     <div class="children">1</div>
                 </li>
                <li>
                     <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> 
                     <div class="children">2</div>
                 </li>
                <li>
                     <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> 
                     <div class="children">3</div>
                 </li>
                <li>
                     <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> 
                     <div class="children">4</div>
                 </li>
                <li>
                     <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> 
                     <div class="children">5</div>
                 </li>
                <li>
                     <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> 
                     <div class="children">6</div>
                 </li>
                <li>
                     <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> 
                     <div class="children">7</div>
                 </li>
                <li>
                     <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> 
                     <div class="children">8</div>
                 </li>
                <li>
                     <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> 
                     <div class="children">9</div>
                 </li>
                <li>
                     <span>手机 电话卡</span> <span class="iconfont">&#xe600;</span> 
                     <div class="children">10</div>
                 </li>
            </ul>
        </div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="list"></div>
    </div>

固定定位

position: fixed

不会保留原来的位置
基于当前可视窗口的四个角落

<style>
        .box{width: 100px;height: 100px;}
        .box1{background: #E99D9D;}
        .box2{background: #77ADF0;}
        .box3{background: #79F67C; width: 150px; height: 150px;}
        .box4{background: #ECF57A; height: 2000px;}
        .box2{
            position: fixed;
            /* left: 0px; */
            /* top: 0px; */
            right: 0px;
            bottom: 100px;
        }
</style>

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box4"></div>

定位优先级

z-index: num数字

当元素发生定位时, 谁的z-index值越大, 那么谁的定位优先级就越高

默认情况下, 越靠后的定位, 优先级越高

<style>
        .box{width: 100px;height: 100px; position:absolute;}
        .box1{background: #E99D9D;}
        .box2{background: #77ADF0;}
        .box3{background: #79F67C; width: 150px; height: 150px;}
        .box1{z-index: 1; left:0px; top:0px;}
        .box2{z-index: 9999999999; left:30px; top:30px;}
        .box3{z-index: 3; left:60px; top:60px;}
</style>

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

zhuqian88

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位

绝对定位定位场景: 只要页面多个元素需要发生重叠时, 就可以使用定位常用定位:绝对定位相对定位固定定位学习任何一个定位, 都必须掌握两点:位置是否保留原点绝对定位:position: absolute不保留原来的位置基于网页第一页的四个角落<style> .box{width: 100px;height: 100px;}...
复制链接

扫一扫