java css定位,CSS的三种定位

相对定位

该元素的位置是相对于它的原始位置计算而来的。

position:relative;

他是默认参照父级的原始点为原始点，配合top、right、bottom、left进行定位。

相对定位

.king{

margin-top: 30px;

margin-left: 30px;

border: 1px solid silver;

background-color: skyblue;

width: 40%;

}

.king div{

width: 100px;

height: 60px;

margin: 10px;

background-color: snow;

color: black;

border: 1px solid black;

}

.three{

position: relative;

top: 20px;

left: 50px;

}

one

two

three

four

固定定位

被固定的元素不会随着滚动条的拖动而改变位置。

position:fixed;

在默认情况下，固定定位元素的位置是相对浏览器而言，结合top、bottom、left和right这4个属性一起使用。

固定定位

.first{

width: 50px;

height: 160px;

border: 1px solid gray;

background-color: #b7f1b7;

}

.second{

position: fixed;

top: 50px;

left: 160px;

width: 150px;

height: 100px;

border: 1px solid silver;

background-color:#b7f1b7;

}

div元素

固定定位的div元素

绝对定位

position:absolute;

默认情况下，绝对定位的位置是相对于浏览器而言，配合top、right、bottom、left进行定位。

绝对定位

.king{

padding: 15px;

border: 1px solid silver;

background-color: skyblue;

width: 30%;

}

.king div{

padding: 10px;

}

.one{

background-color: chartreuse;

}

.two{

background-color: cyan;

position: absolute;

top: 20px;

right: 40px;

}

.three{

background-color: darkred;

}

.four{

background-color: dimgrey;

}

one

two

three

four

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

元素可拥有负的 z-index 属性值。

Z-index 仅能在定位元素上奏效(例如 position:absolute;)

属性值： auto：默认，堆叠顺序与父元素相等。 number：设置元素的堆叠顺序。 inherit：规定应该从父元素继承 z-index 属性的值。

例： 设置图像的 z-index：

img{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}