谈谈对css定位的理解

2022-06-15 03:59:34

　　网上将css定位的有很多，但是大多都没有讲明白或者深入。这里，我将说说我的理解。

　　一、定位的专业解释(来自百度百科)

　　在CSS中关于定位的内容是：position:relative | absolute | static | fixed

　　　● static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

　　　● relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

　　　● absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

　　　● fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

　　CSS中定位的层叠分级：z-index: auto | namber;

　　　● auto 遵从其父对象的定位

　　　● namber 无单位的整数值。可为负数

　　【注】什么是文档流：

　　文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。

　　二、我的理解（文字不理解的，看代码）

　　◆ static：以父级标签（用position限定）左上角为原点，根据top,left,right,bottom定死了，如果父级没有position限定，top、left等限定将不被浏览器解析（即无效）；并且在设计页面不能拖动。

　　◆ relative：设计的时候以文本流（即实际可用空间，只有static和relative会占有文本流）左上角为原点，可以拖动（不影响和父级标签的相对关系），页面缩放时跟随父级标签缩放（相对位置不变），由于文本流的关系，与父级标签存在间接的相对关系。

　　◆ absolute：若父级标签用position的absolute和relative限定，设计的时候以父级标签左上角为原点；其它的（无position限定或者父级用static或者fixed限定的）则相对于body为标准；可以拖动；
页面缩放时只在父级为positon中的absolute和relative限定的时候跟随父级标签（若没有，则以body为标准）缩放。

　　◆ fixed：相对于浏览器的可视窗口固定，在调整窗口的大小时，位置变化只与窗口有关。

下面为表格说明：

	父级标签无position限定	父级标签用static限定	父级标签用fixed限定	父级标签用absolute限定	父级标签用relative限定
fixed	相对可视窗口	相对可视窗口	相对可视窗口	相对可视窗口	相对可视窗口
absolute	相对body	相对body	相对body	相对父级	相对父级
relative	相对文本流定位（与父级有间接关系）
static	相对父级定位 top等限定无效	相对父级定位 top等限定有效	相对父级定位 top等限定有效	相对父级定位 top等限定有效	相对父级定位 top等限定有效

文字永远是枯燥的，本来想画图说明的，但是觉得麻烦，代码能够更好的说明，请看详细测试代码：

css代码（position.css）：

View Code

body 
{
    margin:0;
}
#top
{
    margin: auto;
    width: 850px;
    height: 180px;
    background-color: #99CCFF;
}
.layer_banner
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position: relative;
    top: -1px;
    left: 45px;
}
.layer_banner_ab
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position:absolute;
    top: 391px;
    left: 100px;
}
.layer_banner_st
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position:static;
    top: 197px;
    left: 84px;
}
.layer_banner_fi
{
    border: 10px solid #808000;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: 100px;
    background-color: #99CCFF;
    position:fixed;
    top: 560px;
    left: 82px;
}
.layer_re
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -75px;
    left: 246px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 31px;
    left: 405px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 155px;
}
.layer_fi
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 60px;
    left: 603px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
.layer_re1
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -84px;
    left: 482px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab1
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 19px;
    left: 147px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 413px;
}
.layer_fi1
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 445px;
    left: 450px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st1
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
.layer_re2
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -75px;
    left: 246px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab2
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 223px;
    left: 212px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    }
.layer_fi2
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 219px;
    left: 536px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st2
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
.layer_re3
{
    position:relative;
    margin:10px;
    padding:10px;
    top: -93px;
    left: 189px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_ab3
{
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 300px;
    left: 312px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 481px;
}
.layer_fi3
{
    position:fixed;
    margin:10px;
    padding:10px;
    top: 605px;
    left: 648px;
    width: 100px;
    height: 30px;
    border: 10px solid #0099FF;
    background-color: #FFFFCC;
    z-index:2;
}
.layer_st3
{
    position:static;
    margin: 10px;
    padding: 10px;
    top: 7px;
    left: 199px;
    width: 100px;
    height: 30px;
    border: 10px solid #FFFF66;
    background-color: #FFCCFF;
    z-index: 2;
    right: 451px;
}
#content
{
    margin: auto;
    width: 850px;
    height: 800px;
    background-color: #CCFFCC;
}
#bottom
{
    margin: auto;
    width: 850px;
    height: 130px;
    background-color: #F0F0F0;
}

html页面代码：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="position.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="top">
        这里测试position的relative和absolute的区别
        <div class="layer_banner">
        This sentence is used to test.
        <div class="layer_st">static</div>
        <div class="layer_re">relative</div>
        <div class="layer_ab">absolute</div>
        <div class="layer_fi">fixed</div>
        </div>
    </div>
    <div id="content">
        <div class="layer_banner_ab">
        This sentence is used to test.
        <div class="layer_st1">static</div>
        <div class="layer_fi1">fixed</div>
        <div class="layer_re1">relative</div>
        <div class="layer_ab1">absolute</div>
        </div>
        <div class="layer_banner_st">
        This sentence is used to test.
        <div class="layer_st2">static</div>
        <div class="layer_fi2">fixed</div>
        <div class="layer_re2">relative</div>
        <div class="layer_ab2">absolute</div>
        </div>
        <div class="layer_banner_fi">
        This sentence is used to test.
        <div class="layer_st3">static</div>
        <div class="layer_fi3">fixed</div>
        <div class="layer_re3">relative</div>
        <div class="layer_ab3">absolute</div>
        </div>
    </div>
    <div id="bottom"></div>
</body>
</html>

结果：

缩放之后：

码农公寓

相关文章