AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

谈谈对css定位的理解

2012-08-15 760
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 　　网上将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定位
bowenhuang
目录
相关文章
你都不懂
|
3月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
你都不懂
28 0
小徐在进步
|
4月前
|
前端开发
【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧
定位、CSS精灵与一些其他CSS高级技巧
小徐在进步
45 9
你都不懂
|
5月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
你都不懂
35 5
旺仔大牛
|
5月前
|
前端开发 容器
css中使用定位实现吸顶效果
css中使用定位实现吸顶效果
旺仔大牛
109 2
热爱技术的小郑
|
5月前
|
前端开发
HTML+CSS基础知识（5）相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式：相对定位、绝对定位和固定定位，并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
热爱技术的小郑
105 0
HTML+CSS基础知识（5）相对定位、绝对定位、固定定位
土木林森
|
5月前
|
前端开发 容器
解锁CSS定位奥秘，从迷茫到精通，让你的网页布局“稳如老狗”，引领前端新潮流！
【8月更文挑战第23天】本文深入探讨了Web前端开发中CSS定位的三大基石：相对定位、绝对定位与固定定位。通过具体示例，展示了各种定位方式的特点及应用场景。相对定位可在不影响布局的情况下微调元素位置；绝对定位使元素完全脱离文档流，适用于精确控制位置的需求；固定定位则确保元素始终固定于浏览器窗口特定位置，不受页面滚动影响。这些技巧对于实现复杂网页布局至关重要。
土木林森
77 0
土木林森
|
5月前
|
前端开发 UED 开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力？带你彻底理解粘性定位的奇妙世界！
【8月更文挑战第20天】在前端开发中，CSS的粘性定位（`position: sticky`）是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位，达到指定阈值时转为固定定位，非常适合制作“吸顶”导航栏等。例如，设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏，还可应用于侧边栏等，增强布局灵活性与用户体验。尽管如此，仍需注意不同浏览器间的兼容性和可能的布局冲突。
土木林森
201 0
朝阳39
|
6月前
|
前端开发
css实用技巧——给锚点定位添加偏移
css实用技巧——给锚点定位添加偏移
朝阳39
179 3
好奇的菜鸟
|
7月前
|
前端开发 开发者
CSS属性选择器：精确定位元素的利器
CSS属性选择器：精确定位元素的利器
好奇的菜鸟
78 4
秋刀鱼不做梦
|
7月前
|
前端开发 编译器
CSS定位（如果想知道CSS有关定位的知识点，那么只看这一篇就足够了！）
CSS定位（如果想知道CSS有关定位的知识点，那么只看这一篇就足够了！）
秋刀鱼不做梦
64 8

热门文章

最新文章

  • 1
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 2
    CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
  • 3
    jQuery和CSS3滑动展开菜单按钮插件
  • 4
    探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
  • 5
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 6
    页面滚动触发css3动画js插件
  • 7
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 8
    纸屑飘落生日蛋糕场景js+css3动画特效
  • 9
    纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
  • 10
    在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
  • 1
    css结构伪类
    68
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    97
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    62
  • 4
    HTML5/CSS3粒子效果进度条代码
    80
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    147
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    66
  • 7
    CSS外边距重叠：原理、结果
    58
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    69
  • 9
    CSS常见用法 以及JS基础语法
    72
  • 10
    css设置内嵌样式阴影
    80

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 基于VUE的单页面性能优化实践
  • Python第五讲——关于爬虫如何做js逆向的思路

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月