关闭

CSS中的绝对定位与相对定位

116人阅读 评论(0) 收藏 举报
分类:

来源

http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html


层级关系为:

<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

为改变参照物(橘色框)后的效果
层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

参照物为最顶级的元素情况
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

 

仅使用margin属性布局绝对定位元素的情况
此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。  
图9中,使用margin属性布局相对定位元素。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图:

IE6的情况下,box2前面没有兄弟节点,则margin-left的值会出现双倍边距,见图10。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果图:

 

交流加Q:706507884


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

看完这个,css中position的绝对定位相对定位就懂了

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对...
  • cyyax
  • cyyax
  • 2016-01-29 14:32
  • 15417

详解div+css相对定位和绝对定位用法

在用DIV+CSS控制排版过程中,定位一直被人认为是一个难点,这主要是表现为很多网友在没有深入理解清楚定位的原理时,排出来的杂乱网页常让他们不知所措,而另一边一些高手则常常借助定位的强大功能做出些很酷...
  • hy6688_
  • hy6688_
  • 2013-06-30 15:13
  • 2356

CSS中几种控制页面布局的定位机制(相对定位与绝对定位)

CSS中几种控制页面布局的定位机制对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,我去年学习web编程的时候就对这个一知半解,今天,回过头来再次学习we...
  • duang0626
  • duang0626
  • 2017-07-13 22:17
  • 475

CSS学习三~~相对定位,绝对定位,兼容性基础

CSS浮动和清除 Float:元素浮动,取值:left或right (1)浮动元素可以向左或向右浮动,浮动到包围元素的边框或上一个浮动元素的边上为止; (2)元素浮动起来后,所占的空间就消失了,...
  • Carlos__z
  • Carlos__z
  • 2014-07-24 20:55
  • 1624

详解CSS相对定位,绝对定位与固定定位

CSS定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。     定位的定义:    ...
  • HackProgramer
  • HackProgramer
  • 2014-05-29 21:16
  • 2380

CSS篇之1. CSS 盒子模型,绝对定位和相对定位

1. CSS 盒子模型,绝对定位和相对定位 解答: (1)css盒子模型: CSS中,盒子模型也叫框模型,它规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。在HTML文档中,每个元素...
  • zengyonglan
  • zengyonglan
  • 2016-11-23 09:47
  • 2273

【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

到这里可以验证当使用`top` `right` `bottom` `left` ***(这四个属性可以设置具体的像素数也可以设置百分比)***这样属性改变元素的位置的时候,不会影响其他元素的位置。而使...
  • yisuowushinian
  • yisuowushinian
  • 2015-05-29 23:01
  • 5871

css中的relative(相对位置)和absolute(绝对位置)

这几天在看div+css,在网上找到了很多的资料,我都不知道选择哪一个了。这两天在看>,感觉还可以。把今天学习过程中遇到的问题和知识点,给记录下来。  首先学习到的是css中的相对定位和绝对定位。 ...
  • u010227447
  • u010227447
  • 2014-12-26 10:06
  • 2476

html中的相对定位 和 绝对定位

html中positon:relative; position:absolute;
  • gengbaolong
  • gengbaolong
  • 2017-04-30 17:18
  • 366

CSS的相对定位和绝对定位写得很不错

CSS的相对定位和绝对定位 通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,...
  • fangqun663775
  • fangqun663775
  • 2017-06-08 09:50
  • 359
    个人资料
    • 访问:29558次
    • 积分:582
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:55篇
    • 译文:2篇
    • 评论:0条