0503格式与布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #cs_fixed{
                width: 200px;
                height: 200px;
                background-color: orange;
                position: fixed;/*相当于浏览器的定位*/
                right: 100px;
                bottom: 100px;
            }
            #cs_absolute{
                width: 200px;
                height: 200px;
                background-color: blue;
                /*position: absolute;相当于父级元素进行定位*/
                /*left: 100px;
                top: 100px;*/
            }
            #cs_absolute_nei{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;/*相对于父级元素进行定位*/
                left: 10px;
                top: 10px;
            }
            #cs_relative{
                width: 100px;
                height: 100px;
                background-color: green;
                position: relative;
                top: 20px;
                left: 20px;
            }
            #putong{
                width: 100px;
                height: 100px;
                background-color: #003B4D;
                position: relative;
                top: -10px;
            }
            #dh{
                width: 1004px;
                height: 30px;
                border: 1px solid grey;
            }
            .dh_list{
                width: 250px;
                height: 30px;
                float: left;
                text-align: center;水平居中
                line-height: 30px;垂直居中
                border-right: 1px solid grey;
            }
            #wai{
                width: 300px;
                height: 300px;
                background-color: blue;
                /*解决内外margin重叠现象*/
                /*    overflow: hidden;*/
               border: 1px solid red;
               margin-bottom: 20px;
            }
            #nei{
                width: 100px;
                height: 100px;
                background-color: red;
                margin-top: 10px;
            }
            #ceng1{
                width: 300px;
                height: 300px;
                background-color: black;
                position: relative;
                top: 20px;
                z-index: 1;
            }
            #ceng2{
                width: 200px;
                height: 200px;
                background-color: green;
                position: relative;
                top: -10px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
    <!--    位置-->
    <!--<div id="cs_fixed">
    <div >
        <div id="cs_absolute">
        <div id="cs_absolute_nei">
            
        </div>    
    </div>    
    <div id="cs_relative">
        
    </div>   
    <div id="putong">
        
    </div>    -->
    
    <!--流式布局-->
    <div id="dh">
        <div class="dh_list">春节</div>
        <div class="dh_list">端午</div>
        <div class="dh_list">六一</div>
        <div class="dh_list" style="border-right: 0;">国庆</div>
    </div>
    
    <!--margin重叠现象-->
    <div id="wai">
    <div id="nei">
        
    </div>
        
    </div>
    
    
    <!--    层-->
    <div id="ceng1">
    
    </div>
    <div id="ceng2">
        
    </div>
    </div>
    </body>
</html>

|-层 z-index
|--必须给元素加position或float

相关阅读:
扩展KMP学习笔记
 【洛谷P5555】秩序魔咒【回文自动机】
PAM(回文自动机)学习笔记
 形象理解转置原理在FFT中的应用
 NOIP2020考后总结与计划
 CSP2020游记
 JavaScript——面向对象编程
 JavaScript——实现继承的几种方式
 JavaScript闭包
 学习一门新编程语言的6个步骤
原文地址：https://www.cnblogs.com/mjwwzy/p/8988393.html