显示
显示方式:块级元素、内联元素(行内元素)
display:none|block|inline 元素内容不再显示|行内元素表现得像块级元素|块级元素表现得像内联元素
光标:默认情况下,光标会根据用户的操作发生改变
cursor:(default)|pointer|crosshair|text|wait|help
绝对定位:将元素的内容从普通流中完全移除,不占据空间,并使用偏移属性来固定该元素的位置。
position:absolute,然后使用left或者right属性设置元素的水平位置,使用top或者bottom属性设置元素的垂直位置。
显示方式:块级元素、内联元素(行内元素)
display:none|block|inline 元素内容不再显示|行内元素表现得像块级元素|块级元素表现得像内联元素
光标:默认情况下,光标会根据用户的操作发生改变
cursor:(default)|pointer|crosshair|text|wait|help
绝对定位:将元素的内容从普通流中完全移除,不占据空间,并使用偏移属性来固定该元素的位置。
position:absolute,然后使用left或者right属性设置元素的水平位置,使用top或者bottom属性设置元素的垂直位置。
下面的示例简单演示了绝对定位的效果。
<html>
<head>
<style>
div.child{
width:80px;
height:30px;
border:1px solid black;
background-color:silver;
}
div.parent{
width:200px;
height:150px;
border:1px solid gray;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child" style="position:absolute;top:15px;left:30px;">2</div>
</div>
</body>
</html>
堆叠顺序:一旦修改了元素的定位方式,则元素可能会发生堆叠。
z-index:value 值越大,表示堆叠顺序越高,离用户更近,元素的显示会接近页面表面。
下面的示例简单演示了堆叠顺序的效果。
<html>
<head>
<style>
div{
z-index:100;
width:200px;
height:100px;
border:1px solid gray;
background-color:white;
}
div.first{
position:relative;
top:-10px;
left:30px;
z-index:-1;
background-color:silver;
}
div.second{
position:absolute;
top:60px;
left:150px;
z-index:2;
background-color:silver;
}
</style>
</head>
<body>
<div>div</div>
<div class="first">z-index:2</div>
<div class="second">z-index:-1</div>
</body>
</html>