html中元素定位问题

relative 定位

相对定位元素的定位是相对其正常位置。就是原来的位置

下面是正常情况下高度81.91

 

 设置相对定位后高度还是81.91 ，没有变化，但是内容移到上面去了

 

 

 

 

移动相对定位元素，它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

 

absolute 定位 

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

就是说他的父元素样式中必须有 position    这个定位修饰词，否则是相对整个页面来定位的

 

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

 

<!DOCTYPE html>
<html>
    <head>
        <title>
            top he bottom
        </title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .main{
                width: 100%;
                height: 500px;
                background-color: black;
                position:relative;
                
            }
            .test{
                position:absolute;
               
             background-color: red;
                width: 100%;
                height: 100px;
                top: auto;
                bottom: 20px;
            }
            h2.pos_top
            {
                position:relative;
                top:-50px;
            }
        </style>
    </head>
    <body>
        <div class="main">
dsdsdsdsd
            <div style="width: 100%; height: 100px; background-color: burlywood;">
                dsdsd
            </div>
            <div class="test">
                <div>
                    <h2>这是一个没有定位的标题</h2>
                    <h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
                </div>
            </div>
       
        </div>
    </body>
</html>

 

参考：https://www.runoob.com/css/css-positioning.html

posted @ 2020-03-19 21:52  剧里局外  阅读(762)  评论(0)  编辑  收藏  举报