【物体position:absolute后设置left:50%发生的有趣小事】的更多相关文章

物体position:absolute后设置left:50%发生的有趣小事

今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下 一 准备知识 ①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽高 ②一个内联元素设置position:absolute会自动转为一个块状元素 那么我提出三个问题: problem01:一个没有设置宽高的块状元素position:absolute,top:0;left:0,它的宽高如何显示? problem02:一个内联元素position:absolute,t…

IE 下a标签在 position:absolute 后无法点击的问题

IE 下 a 标签在 position:absolute 后无法点击的问题 条件 : DOCTYPE 为 XHTML. IE 浏览器 现象 : 将 a 的 position 指定为 absolute,指定 display:block,指定 width.height,则 IE 中 a 的无内容区域不可点击. 原因:由于在 IE 中,a 的无内容区域,被当作是穿的,就像一个镂空的框一样,鼠标移上去是点不到东西的,如果存在文字,则有文字链接,如果不存在,则完全点不到. 解决方案: 1. 给 a 设置高…

解决绝对定位div position: absolute 后面的<a> Link不能点击

今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events:none;这样能够让鼠标事件穿透这个绝对定位层,使之能点击到后面的<a>,然后再在这个绝对定位层里面需要接受事件的<a>上面添加:pointer-events:auto; 这样做当元素比较多的时候比较烦. 我发现好一点的解决方案是: 把这个绝对定位的div后面需要点击的link也放到…

position absolute 绝对定位 设置问题

 今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知怎么的,设置了一个left 值,绝对定位元素就上去了,覆盖到了上面的兄弟元素.这时终于下决心研究一下,绝对定位的top left 值的设置问题,如果没有设置会怎么样,设置了一个会怎么样,设置了两个呢? 1, 父元素相对定位,子元素两个:一个普通文档流(块级元素),在前,一个决对定位元素,在后. <d…

在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: absolute会脱离normal float, 即该元素会直接以root标签(类似window但不是<html>标签)进行参照,而root标签的高度存在具体数值, 即浏览器视窗高度, 有明确px值. 而relative不会脱离normal float, 他的height会直接依赖直接父元素(em…

css position absolute相对于父元素的设置方式

手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角.   有时候我们需要在父元素的容器内设置相对的绝对位置 要做到这一点需要把父元素的position属性设置为relative,设置为relative之后不…

通过案例理解position:relative和position:absolute

w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:absolute困扰了我快一个星期之久,网上找到的资料鱼龙混杂,刚确定“这样”的理解之后,看另一份资料,发现“这样”理解是错了,就这样不断更正,并记录下来,最终整理出这份,以备参阅. 若有错误,请指正. 下面的结果都是基于firefox38版本来测试的. position:relative相对定位 1. 如…

CSS--position:relative和position:absolute

position:relative相对定位 1. 如何定位?每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认位置.(在父级节点的content-box区定位,父级节点有文字的话,元素的默认位置则是紧随文字)2. 不会改变行内元素的display属性.3. 并没有脱离普通流,只是视觉上发生的偏移.代码—— <body style='margin:0;padding:0;background:#BDD7EE;…

position:absolute 按钮左右分布：left:0 和 right:0 以及雪碧图

问题:把两个a标签按钮 垂直居中,并且分别把两个按钮放在水平左右两边顶部1,祖父元素设定:position:relative2,把.arrow 设定上下垂直居中 position:absolute; top:50%; margin-top:-20px;3,因为父级元素已经进行垂直居中定位,所以,只要把 a 标签进行左右定位即可 a标签公共样式.item{ position:absolute;} 这里如果设置left:0,那么.right设置right:0;就无效,如果同时设置:left:0 和…

position:absolute溢出处理

今天在做布局的时候发现把table设置了position:absolute后 overflow居然不管用了,溢出的部分依然溢出. 百度后,才想起来... ... position后,元素已经和父元素不在一个流里面了,而overflow只能对在同一流中的元素起作用. 简单说, 就是 table 已经是移民火星了,而table外面的div 依然还在地球,那么身在地球的div自然是管不了身在火星的table咯. 所以解决办法, 既然table移民了,那么它爹div也跟着移个民不就可以管着table了吗…