谈谈对css定位的理解-阿里云开发者社区

谈谈对css定位的理解

2012-08-15 837

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 　　网上将css定位的有很多，但是大多都没有讲明白或者深入。这里，我将说说我的理解。　　一、定位的专业解释(来自百度百科) 　　在CSS中关于定位的内容是：position:relative | absolute | static | fixed 　　　● static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

　　网上将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>

结果：

缩放之后：

文章标签：

前端开发

关键词：

CSS定位

谈谈对css定位的理解

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

谈谈对css定位的理解

热门文章

最新文章

相关课程

相关电子书