其他分享
首页 > 其他分享> > html---定位position(固定,相对(relative),绝对(absolute))

html---定位position(固定,相对(relative),绝对(absolute))

作者:互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
<!--         position
        属性值:
        相对定位(relative)
                          left right top bottom 
                1.使用相对定位后,不会脱离文档流。也就不会影响其他元素的位置
                2.只是用相对定位,不使用以下left等四个值是不会进行偏移的
                如何使用相对定位:如
                position:relative;
                left:100px;
                top:100px;
        绝对定位(absolute)
                1.使用绝对定位后,脱离文档流
                2.使内联元素支持宽高,如span
                3.使块元素的宽度跟随内容决定(让块标签具有内联的一些特性)
                4.父元素没有定位元素,而子元素有定位元素,那么子元素的偏移是按照整个文档流进行的,而不是按照盒子进行的,给父元素设置定位后,则解决这个问题(固定定位,相对定位,绝对定位)
         -->        
        <style>
            #Position_01{
                width: 100px;
                height: 100px;
                background-color: #0000FF;
            }
            #Position_02{
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;/* 相对定位 */
                left: 100px;
                top: 100px;
            }
            #Position_03{
                width: 100px;
                height: 100px;
                background-color: #000000;
                color: #FF0000;
                position: absolute;
            }
            #Positon_04{
                width: 200px;
                height: 200px;
                border: 2px solid #0000FF;
                position: relative;
                
            }
            #Position_05{
                width: 100px;
                height: 100px;
                background-color: #000000;
                /* position: absolute; *//* 脱离文档流,下面盒子上来 */
            }
            #Position_06{
                background-color: #FB8303;
                position: absolute;该盒子不设置宽高,设置绝对定位后,使块元素具有内联作用(宽度根据内容决定)
                
                
            }
            span{
                width: 100px;
                height: 100px;
                background-color: #0000FF;
                position: absolute;/* 内联标签占宽高 */
                bottom: 150px;
            }
            #Position_07{
                width: 100px;
                height: 100px;
                background-color:  antiquewhite;
                position: absolute;
                left: 100px;
                top: 100px;
            }
        </style>
    </head>
    <body>
<!--     #相对定位
        <div id="Position_01">1</div>
        <div id="Position_02">2</div>
        <div id="Position_03">3</div> -->
        <div id="Positon_04">
            <div id="Position_05">2</div>
            <div id="Position_06">3</div>
            <div id="Position_07">4</div>
        </div>
        <span>111</span>
    </body>
</html>

 

标签:---,color,100px,height,relative,width,html,background,position
来源: https://www.cnblogs.com/wsx123/p/15796135.html