CSS学习：定位！-极品分享

CSS学习：定位！

一、CSS定位的类型：

1、静态定位：static (默认的定位方式)

相关说明：即默认情况下的定位规则。

使用方法：position:static

2、相对定位：relative

相关说明：相对定位是指，相对于该元素应当出现的位置左上角来重新定位。虽然该元素脱离了标准流并且位置发生了变化，但该元素原来的空间继续保留。

使用方法：position:relative

例子效果：

例子代码：

<html>
<head>
<style>
.div1{
    width:70px;
height:20px;
background:silver;
float:left;
margin-left:5px;
}
#spe{
   position:relative;
   top:50px;
   left:30px;
}
</style>
</head>
<body>
<div class="div1">内容一</div>
<div id="spe" class="div1">内容二</div>
<div class="div1">内容三</div>
<div class="div1">内容四</div>
</body>
</html>

3、绝对定位：absolute

相关说明：绝对定位是指，对该元素最近的那个脱离了标准流的元素定位。如果没有父元素（或父元素没有脱离标准流），则相对于body左上角定位。该元素原来的空间不再保留。

使用方法：position:absolute;

例子1效果：没有父元素情况下的绝对定位

例子1代码：

<html>
<head>
<style>
*{
    margin:0px;
padding:0px;
}
.div1{
    width:70px;
height:20px;
background:silver;
float:left;
margin-left:5px;
}
#spe{
   position:absolute;
   top:50px;
   left:30px;
}
</style>
</head>
<body>
<div class="div1">内容一</div>
<div id="spe" class="div1">内容二</div>
<div class="div1">内容三</div>
<div class="div1">内容四</div>
</body>
</html>

例子2效果：有父元素，但父元素未脱离标准流

例子2代码：

<html>
<head>
<style>
*{
    margin:0px;
padding:0px;
}
.div1{
    width:70px;
height:20px;
background:silver;
float:left;
margin-left:5px;
}
.div2{
    width:200px;
height:150px;
background:pink;
float:left;
}
#spe{
   position:absolute;
   top:50px;
   left:30px;
}
</style>
</head>
<body>
<div class="div1">内容一</div>
<div class="div1">内容三</div>
<div class="div1">内容四</div>
<div class="div2">
<div id="spe" class="div1">内容二</div>
</div>
</body>
</html>

例子3效果：有父元素，同时，父元素脱离了标准流

例子3代码：

<html>
<head>
<style>
*{
    margin:0px;
padding:0px;
}
.div1{
    width:70px;
height:20px;
background:silver;
float:left;
margin-left:5px;
}
.div2{
    position:relative;
left:50px;
top:50px;
    width:200px;
height:150px;
background:pink;
float:left;
}
#spe{
   position:absolute;
   top:50px;
   left:30px;
}
</style>
</head>
<body>
<div class="div1">内容一</div>
<div class="div1">内容三</div>
<div class="div1">内容四</div>
<div class="div2">
<div id="spe" class="div1">内容二</div>
</div>
</body>
</html>

4、固定定位：fixed

相关说明：不管有没有父元素，都根据视窗的body来定位。

使用方法：position:fixed

注意：

1、top和left属性对static（默认）定位无效，static的定位移动使用margin-top和margin-left定位。

2、当定位出现多个层重叠时，用z-index:数值来控制谁在上面谁在下面，数值越大越在上层，反之越在下层。例如：z-index:3; 会覆盖在z-index:5;上面

极品分享

CSS学习：定位！

评论回复