第十三篇-CSDN博客

本文链接：https://blog.csdn.net/a530609250/article/details/86906733

定位网页元素
CSS中有三种定位机制，分别是标准流，浮动和绝对定位
position属性，position属性和float属性一样，都是排版中非常重要的概念。
position属性有四个属性值
static：默认值，没有定位
relative：相对定位，以标准文档为基础，然后使盒子相对于他在原本标准偏移指定的距离。但仍在标准文档流中
absolute：绝对定位，脱离标准文档流来移动他
fixed：固定定位，以浏览器窗口为基准，拖动浏览器窗口滚动条时，仍然保持对象位置不动。

relative属性值，偏移设置：top、left、right、bottom，
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
position:relative;
right:20px;
bottom:30px;
}
absolute属性值
偏移设置： left、right、top、bottom
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
position:absolute;
right:30px;
}
fixed属性值
偏移设置： left、right、top、bottom
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口
div:nth-of-type(1) { /第一个div设置绝对定位/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}

z-index属性
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
opacity:x x值为0~1，值越小越透明

filter:alpha(opacity=x） x值为0~100，值越小越透明

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dangdang{
            border: 0px blue solid;
            padding-top: 10px;
        }
        .q01{
            margin: 0px auto;
            width: 960px;
        }
        li{
            list-style: none;
        }
       .q02{
           float: right;

           border: 0px red solid;
           margin: 10px;
           position: relative;
           top: -40px;
           left: -5px;
           z-index: 2;
       }
        .dangdang:after{
            content:'';
            display: block;
            clear: both;
        }
        .q03{
            border: 0px red solid;
            float: right;
            height: 40px;
            position: relative;
            top: 26px;
            width: 320px;
            left: 1px;
            background-color: #eafffa;
            opacity: 0.8;
        }
        .q04{
            position: relative;
            top: -12px;
            left: 30px;
        }
        .q06{
            border: 0px red solid;
            height: 40px;
            width: 960px;
            margin: 0px auto;
            background-color: #fe6915;


            position: relative;
        }
        .q05{
            float: left;
            margin: 9px；
            position: relative;
            top: -56px;
            left: 120px;
            z-index: 2;
            color: white;
        }
        .q07{
            width: 960px;
            margin: 0px auto;
            border: 1px #cce9ac solid;
            height: 360px;
        }
        .q08{
            float: left;
            border: 0px red solid;
        }
        .q09{
            border: 0px red solid;
            position: relative;
            top: 80px;
            left: -40px;
            font-size: 16px;
        }
        .q10{
            width: 960px;
            margin: 0px auto;
            float: left;
            border: 0px red solid;
            position: relative;
            left: 100px;
            font-size: 12px;
            text-align: center;
            top: -60px;
        }
    </style>
</head>
<body>
<div id="dangdang" class="dangdang">
    <div class="q01">
        <img src="img/logo.jpg">
        <div class="q03">
            <img src="img/icon_count.png" class="q04">
        </div>
        <ul>
            <li><div class="q02">唯品会</div></li>
            <li><div class="q02">当当优品</div></li>
            <li><div class="q02">数字馆</div></li>
            <li><div class="q02">都阅读器</div></li>
        </ul>
    </div>
    <div class="q06">
    </div>
        <ul>
            <li><div class="q05">首页</div></li>
            <li><div class="q05">图书</div></li>
            <li><div class="q05">音像</div></li>
            <li><div class="q05">童装</div></li>
            <li><div class="q05">服装</div></li>
            <li><div class="q05">鞋靴</div></li>
            <li><div class="q05">运动</div></li>
            <li><div class="q05">箱包</div></li>
            <li><div class="q05">美妆</div></li>
            <li><div class="q05">珠宝</div></li>
            <li><div class="q05">家居</div></li>
            <li><div class="q05">食品</div></li>
            <li><div class="q05">酒</div></li>
            <li><div class="q05">手机</div></li>
            <li><div class="q05">数码</div></li>
            <li><div class="q05">电脑</div></li>
            <li><div class="q05">家电</div></li>
        </ul>
    <div style="margin: 0px auto; width: 960px; position: relative; top: -40px;">
        <img src="img/banner.png">
    </div>
    <div class="q07">
        <div class="q08"><img src="img/bg_bang.gif" style="position: relative; left: -15px;"><br>
        <img src="img/book-01.jpg" style="position: relative; top: 30px;">
        <img src="img/bookNo1.gif" style="position: relative; top: -190px; left: -240px;"></div>
        <div class="q08"><div class="q09">偷影子的人 <br><br>
            作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译<br><br>

            出版社：湖南文艺出版社<br><br>

            当当价：￥ 17.90<br><br>

            不知道姓氏的克蕾儿。这就是你在我生命里的角色，<br>
            我童年时的小女孩，今日蜕变成了女人，一段青梅竹<br>
            马的回忆，一个时间之神没有应允的愿望。 一个老是<br>
            受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能<br>
            力而强大：他能“偷别人的影子”，因而能看见他</div></div>
        <div class="q08">
            <img src="img/book-02.jpg"style="position: relative; top: 70px; left: -60px;">
            <img src="img/bookNo2.gif" style="position: relative;  left: -160px;">
            <div style="position: relative; top: 0px; left: 40px; font-size: 12px">看见(央视知名记者、主持人柴静：十年个人<br>
                成长的告白，中国社会变迁的备忘<br>
                作 者：柴静 著<br><br>
                出版社：广西师范大学出版社<br><br>
                ￥ 29.40 7.4折</div>
            <div><img src="img/book-03.jpg"style="position: relative; top: 0px; left: -60px;">
                <img src="img/bookNo3.gif" style="position: relative;  left: -160px; top: -70px;"></div>
            <div style="position: relative; top: -80px; left: 40px; font-size: 12px">改变孩子先改变自己<br><br>
                作 者：贾容韬 贾毅 著<br><br>
                出版社：作家出版社<br><br>
                ￥ 22.20 7.4折</div>
        </div>
    </div>
    <div class="q10">
        Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="img/validate.gif" style="position: relative; top: 30px">京ICP证041189号出版物经营许可证 新出发京批字第直0673号
    </div>
</div>
</body>
</html>