文档章节

一步一图剖析CSS中的position定位

顽Shi
 顽Shi
发布于 2014/03/21 11:16
字数 1006
阅读 576
收藏 51

    在CSS布局上float和position是永远说不完的道不尽的话题,它们的应用五花八门,组合技巧千奇百怪.通常如果你不是一个很熟练的Csser,那么你对与position肯定还是一知半解,比如说我自己...

    position的属性值大家应该是很熟悉的,static,absolute,relative,fixed.    

    这里做个demo,一步步详解position.

    (1) 准备一些div,只加上背景色去区分它们,如下图.

    代码:


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#example {
    float: right;
}
 
#example p {
    margin: 0 0.25em;
    padding: 0.25em 0;
}
#div-top,
#div-footer {
    background-color: #88d;
    color: #000;
}

#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
}

#div-1-padding {
    padding: 10px;
}

#div-1a {
    background-color: #d33;
    color: #fff;
}

#div-1b {
    background-color: #3d3;
    color: #fff;
}
 
#div-1c {
    background-color: #33d;
    color: #fff;
}  
</style>
</head>
<body>
<div id="example">               
    <div id="div-top">
        <p>id = div-top</p>
    </div>
    <div id="div-1">
        <div id="div-1-padding">
            <p>id = div-1</p>
            <div id="div-1a">
                <p>id = div-1a</p>
                <p>这是div-1的子div,div-1a.</p>
            </div>
            <div id="div-1b">
                <p>id = div-1b</p>
                <p>这是div-1的子div,div-1b.</p>
            </div>
            <div id="div-1c">
                <p>id = div-1c</p>
                <p>这是div-1的子div,div-1c.</p>
            </div>
        </div>
    </div>
    <div id="div-footer">
        <p>id = div-footer</p>
    </div>
</div>
</body></html>
    (2) 首先是static,这个属性是position的默认属性.这里不多说了,因为通常设置position:static;的情况都是取消定位的.


    (3) relative 是相对定位,这个相对指的是元素的正常位置,就是相对于你不加position:relative;的情况进行了如何的偏移.加完这个属性可以通过top,left,bottom,right进行位移设置.如果没有设置这些位移仅仅设置position:relative;那么元素位置不会有任何变化.

    需要注意的是设置为relative的元素,它默认占有的空间还会继续被该元素占有,同时它不会影响其他相邻元素.    


#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
    position: relative;
    top: 10px;
    left: -20px;
}
    修改后效果如图:


    (4) absolute 是绝对定位,这个属性绝对是position的精髓所在.绝对定位元素会脱离文档流,整个文档会当做它不存在一样去排版,并且它原先所占有的空间也不会存在.


#div-1a {
    background-color: #d33;
    color: #fff;
    position: absolute;
    top: 10px;
    left: 20px;    
}
    这时之前最外层div的float对于div-1a不起作用了,然后它相对于最外层标签html定位了,并且它原先的位置被下面的元素占用了.


    上面之所以div-1a是相对于html定位是在一定条件下得,并不是通用的.只有在绝对定位的任何祖先元素都没有设置position值为relative或absolute的情况下,它才会比照html进行定位.

    如果话被这么说了,那么可以联想到relative+absolute这样的组合一定会产生别的结果.


如果一个元素被绝对定位,那么先在离自己最近的元素中看有没有相对定位的元素,如果有则以此为参照物.如果没有则追溯祖先元素中有没有相对定位的元素.


    (5) relative + absolute = absolute以relative定位.

    修改代码:


#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
    position:relative;
}

#div-1-padding {
    padding: 10px;
}

#div-1a {
    background-color: #d33;
    color: #fff;
    position: absolute;
}
    将div-1加上relative,然后去掉div-1a的top和left.看效果:


    可以看到div-1a覆盖了一部分的div-1b,大约一半左右.它变成相对于div-1定位了,而不是html.

    (6) position布局

    通过relative+absolute就可以实现一些布局效果.


#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
    position:relative;
}

#div-1-padding {
    padding: 10px;
}

#div-1a {
    background-color: #d33;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#div-1b {
    background-color: #3d3;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;s
}


    可以看到div-1a和div-1b的布局,相对于div-1并且忽略了div-1的padding属性.

© 著作权归作者所有

顽Shi
粉丝 275
博文 81
码字总数 92387
作品 0
普陀
程序员
私信 提问
加载中

评论(5)

第五郎
第五郎
不错
顽Shi
顽Shi 博主

引用来自“jingxing05”的评论

很好

有用就好~
顽Shi
顽Shi 博主

引用来自“blindcat”的评论

收了

有用就好~
qingfeng哥
qingfeng哥
很好
blindcat
blindcat
收了
IE6下z-index犯癫不起作用bug的初步研究[转]

by zhangxinxu from http://www.zhangxinxu.com 一、匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述。这里就简单带过,z-index伴随着层的概念...

曾沙
2012/06/26
72
0
css页面布局

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<addr......

小神神的大草原
2016/09/05
66
0
CSS中背景图片定位方法

CSS中背景图片的定位,困扰我很久了。今天总算搞懂了,一定要记下来。 在CSS中,背景图片的定位方法有3种:   1)关键字:background-position: top left;   2)像素:background-positi...

阮一峰
2008/05/07
0
0
offsetParent、offsetLeft/offsetTop深度剖析

element.offsetParent 定义 element.offsetParent为包含element的祖先元素中,层级最近的定位元素。 也就是说,offsetParent必须满足三个条件: 是element的祖先元素 最靠近element 是定位元...

Codeeeee
2018/12/22
0
0
CSS 基础入门语法

盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框:...

御前带刀红衬衫
2016/07/28
33
0

没有更多内容

加载失败,请刷新页面

加载更多

关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0
面试套路题目

作者:抱紧超越小姐姐 链接:https://www.nowcoder.com/discuss/309292?type=3 来源:牛客网 面试时候的潜台词 抱紧超越小姐姐 编辑于 2019-10-15 16:14:56APP内打开赞 3 | 收藏 4 | 回复24 ...

MtrS
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部