且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

position定位

更新时间:2022-09-21 20:51:01

position的值

描述
static

默认值。没有定位,元素出现在正常的流中。

(忽略 top, bottom, left, right 或者 z-index 声明)。
relative

生成相对定位的元素,相对于其正常位置进行定位。

(元素的位置可以通过 "left","top"属性进行规定)。
absolute 生成绝对定位的元素,相对于static 定位以外的第一个父元素进行定位。(元素的位置只能通过"left", "top", "right" 以及"bottom" 属性进行规定)。
fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

(元素的位置只能通过 "left","top", "right" 以及"bottom" 属性进行规定)。
inherit 规定应该从父元素继承 position 属性的值。

首先初始化样式:

{
    
padding:0px;
    
margin:0px;
}

html,body {
    
background-colorlightgray;
    
width100%;
    
height100%;
}

 

 

1、static默认定位:

#div1{

    width: 200px;

    height: 200px;

    background-color: #FF66FF;

}

<body>

    <div id="div1">

        div1

    </div>

</body>

position定位


2、relative定位

#div2{
    width: 200px;
    height: 200px;
    background-color: #FF66FF;
    position: relative;
    left:10px;
    top:10px;
}
<body>
    <div id="div2">
        div2
    </div>
</body>

 

position定位


3、absolute定位
第一个实例:
#div3{
    width: 200px;
    height: 200px;
    background-color: #FF66FF;
    position: absolute;
    right:10px;
    bottom:10px;
}

<body>
    <div id="div3">
        div3
    </div>
</body>

position定位

第二个实例:

#div4{
    width: 200px;
    height: 200px;
    background-color: #FF66FF;
}
#div5{
    width: 200px;
    height: 200px;
    background-color: coral;
    position: absolute;
    left:10px;
    top:10px;
}
#btnClose{
    width: 80px;
    height: 20px;
}

<body>
    <div id="div4">
        div4
    </div>
    <input id="btnClose" type="button" value="关闭"/>
    <div id="div5">
        div5
    </div>
</body>

position定位










本文转自 yntmdr 51CTO博客,原文链接:http://blog.51cto.com/yntmdr/1655872,如需转载请自行联系原作者