绝对定位

　　绝对定位的特征：

1、使用CSS样式规则{position：absolute；}声明

2、使用一到多个偏移属性（top、right、left、bottom）相对于容器块的边缘进行定位。没有设置偏移属性的，默认被设置为auto。偏移值应用于元素和的外边缘（如果有margin值的话，就包括margin值）。

3、绝对定位的元素完全从文档中脱离出来。该元素在正常文档流中所占据的空间不保留，并且它不在影响其它元素（例如，文本不会围绕着它）。

4、使用绝对定位会设置当前元素为inline-block

5、绝对定位没有定位父级的时候，默认以文档作为父级

6、如果有多个定位父级，找最近的父级

7、绝对定位一般配合相对定位使用

时间： 2024-11-07 23:13:18

绝对定位的相关文章

width:100%与绝对定位同时存在，偏移出父级容器

当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面 出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个子元素就有多宽,所以子元素跑到了父级容器外 html <div class="container"> <div class="content">好的</div> </div> css .container { positi

CSS之绝对定位

w3school定义: 绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块. 对于定位的主要问题是要记住每种定位的意义.所以,现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块. 注释:根据用户代理的不同,最初的包含块可能是画布或 HTML 元素. 绝对定位是基于最近的一个定位了的父容器(示例1):绝对定位是基于最近

css 相对定位与绝对定位

相对定位的规律: 使用相对定位的盒子,会相对于它原来的位置,通过偏移指定的距离,到达新的位置. 使用相对定位的盒子仍在标准流中,它对父亲和兄弟盒子都没有任何影响. 绝对定位的规律: 使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移.如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位. 绝对定位的框从标准流中脱离,这意味它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样.

相对定位与绝对定位

相对定位(relative):对一个元素进行相对定位,它将出现在它所在的位置上,依据left,right,top,bottom等属性在正常文档流中偏移自身位置.,让元素相对于它的起点进行移动. 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间.因此,移动元素会导致它覆盖其它框. 绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位. 绝对定位的元素的位置相对于最近

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

1.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto;来实现水平居中,而一直认为margin:auto;不能实现垂直居中......实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin : auto ; position : absolute ; left : 0 ; right : 0 ; top : 0; bottom: 0; } 优点: 1.支持跨浏览器,包括IE8-IE10: 2.无需其他

CSS绝对定位属性

position - 类型:用于确定定位的类型,共有绝对(absolute).相对(relative)和静态(static)等3种选择. z-index - Z轴:用于控制网页中块元素的叠放顺序,可为元素设置重叠效果.该属性的参数值使用纯整数,值为0时,元素在最下层,适用于绝对定位或相对定位的元素. visibility - 显示:使用该属性可将网页中的元素隐藏,共有继承(inherit,继承母体要素的可视性设置).可见(visible)和隐藏(hidden)等3种选择. overflow -

新接触的多几种定位方式（相对定位、绝对定位、固定地位和浮动）

本周学习了页面布局相关的东西,网页 布局中,几种定位是我们经常用到的一个知识点,现在罗列一下目前接触到的剧中定位 方式以及其具体解释: 1.relative(相对定位) 在static的基础上,让一个元素在他本来的位置做一些位移,可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right).有一点需要注意的是,相对定位的元素没有脱离文档流,仍然占据着他本来占据的位置空间. 2.absolute(绝对定位) 中将一个元素放至指定位置,可以使用absol

css-相对定位和绝对定位相关问题

1.关于子元素设置margin-top会顶开父元素的上边距的原因: 这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠. 再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 "领导"(父元素,祖先元素)的麻烦.只要给领导设置个有效的 border或者padding就可以有效的管

绝对定位模拟固定定位效果...

今天下班,突然发现同学在群里求救解决固定定位在移动端偏移的问题,本屌丝猛地一颤:那一天,我终于回想起来了,曾经一度被ios固定定位失效所支配的恐怖,还有被市场妹子一脸嘲讽的看着的那份屈辱...(本屌意淫一下巨人). 真是情况就是,ios对固定定位的支持有点奇葩,当固定定位的层里有input一类的能调动虚拟键盘的元素时,一旦用户聚焦这些元素,固定定位的层级中的元素会发生位移,也就是俗称的页面错乱了,本屌当时寻遍网上各种方案,试了大半天时间(其实,就是因为没钱穷屌丝一枚,没有水果手机,每次测试都要厚

CSS+DIV在用absolute绝对定位时怎么使页面自适应

<div id="div1" style="position:absolute;left:10%;top:20%;width:50%;"> <div id="div2" style="position:absolute;left:20%;top:30%;width:20%;"> <div id="div3" style="position:absolute;left: