首页 > 其他分享> > 定位(position)详解以及其应用情况(可以取负值)【小米案例】

定位(position)详解以及其应用情况(可以取负值)【小米案例】

2020-01-24 17:02:04 作者：互联网

静态定位

1.静态定位是标签的默认定位方式，即各个标签在HTML文档流中的默认位置。
2.在静态定位状态下，无法通过边偏移属性(top,bottom,left,right)改变标签位置
3.一般我们需要将固定定位或者绝对定位以及其他定位转化为标准流下的元素时，我们需要将该元素设置为静态定位即可。
position:static;

绝对定位

position:absolute;
left:20px;
top:20px

特点:
1.通过给元素设置绝对定位可以改变元素的位置。
2.绝对定位是将标签依据最近的已经定位的父标签(绝对，固定，相对定位)进行定位，如所以父标签都没有定位，设置绝对定位的标签会依据body根标签(浏览器窗口)进行定位。
3.如果一个子元素的父元素没有设置定位或者设置了静态定位，那么该绝对定位的子元素是相对浏览器（body）左上角为参照进行位置移动的。
4.绝对定位的元素是脱标的元素(不占位置)。
5.绝对定位也可以让元素进行模式转换(脱标引起的)

绝对定位的使用场景

在这里插入图片描述

总结:
一般如果网页布局中出现一个容器(盒子)压着另外一个盒子，那么我们考虑绝对定位。

绝对定位(脱标)的元素居中显示

margin:0 auto;只能让标准流的盒子居中
推荐方式：
position:absolute;
/*相对父元素宽度的一半*/
left:50%;
margin-left:-相对于自己元素宽度的一半;

小米案例（背景图去官网偷吧）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .banner{
            width: 1164px;
            height: 437px;
            margin: 30px auto;
            position: relative;
        }
        .aside{
            width: 230px;
            height: 437px;
            background-color: rgba(0,0,0,0.3);
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .pages .left{
            height: 80px;
            width: 44px;
            position: absolute;
            left: 230px;
            top: 50%;
            margin-top: -40px;
            color: #fff;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
        }
        .pages .right{
            height: 80px;
            width: 44px;
            position: absolute;
            right: 0px;
            top: 50%;
            margin-top: -40px;
            color: #fff;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
        }
        .pages .right:hover{
            background:rgba(0,0,0,0.3);
        }
        .pages .left:hover{
            background:rgba(0,0,0,0.3);
        }
        .aside ul{
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .aside li{
            height: 40px;
            display: block;
            line-height: 40px;
            padding-left: 25px;
            color: white;
            position: relative;
        }
        .aside li:hover{
            background-color: orange;
        }
        .aside span{
            font-size: 19px;
            position: absolute;
            right: 20px;

        }
    </style>
</head>
<body>
<div class="banner">
    <a href="#">
        <img src="images/1.jpg" alt="小米手机">
    </a>
    <div class="aside">
        <ul>
            <li>手机 电话卡
                <span>></span>
            </li>
            <li>电视 盒子
                <span>></span>
            </li>
            <li>笔记本 显示器 平板
                <span>></span>
            </li>
            <li>家电 插线板
                <span>></span>
            </li>
            <li>出行 穿戴
                <span>></span>
            </li>
            <li>智能 路由器
                <span>></span>
            </li>
            <li>电源 配件
                <span>></span>
            </li>
            <li>健康 儿童
                <span>></span>
            </li>
            <li>耳机 音响
                <span>></span>
            </li>
            <li>生活 箱包
                <span>></span>
            </li>
        </ul>
    </div>
    <div class="pages">
        <span class="left"><</span>
        <span class="right">></span>
    </div>
</div>
</body>
</html>

在这里插入图片描述

相对定位

1.相对定位是将标签相对与它在标准文档流中的位置进行定位。
2.相对定位的元素没有脱标(占位置),不能实现模式转换。
使用场景：
◆如果元素设置了绝对定位，那么推荐直接给其父元素设置相对定位(子绝父相)

固定定位

position:fixed;
left:20px;
top:23px;
特点:
1.固定定位的元素始终参照浏览器(body)标签左上角为参照进行位置改变(与父元素有无定位无关)。
2.固定定位的元素也是脱标的元素(不占位置)。
3.可以进行模式转换。
4.物理页面怎么移动，该元素在页面中的位置始终不会改变。

九层之台始于垒土发布了30 篇原创文章 · 获赞 3 · 访问量 457 私信关注

标签：定位,负值,top,元素,height,详解,position,left
来源： https://blog.csdn.net/dwjdj/article/details/104077921