position:absolute和width的关系

碰到如下问题: 如图,我设置了宽高和绝对定位 ,但实际上我图片显示宽度为0: 然后我就查了一下,发现是因为我设了公共img宽度有个max-width:100%:屏蔽掉就有正常宽了,这点暂时没明白为啥不过当图片设置为postion:absolute的时候,它的父级元素需要设置position:relative,它的宽高会根据父元素的宽高来设置,如果没有设置父元素的position:则按浏览器作为父元素的宽高算至于怎么算我也不太清楚目前如果我取消position,图片是可以正常显示的, 或者说…

position:absolute溢出处理

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

【总结】我所整理的float, inline-block还有position:absolute

这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择浮动和position:absolute对于脱离文档流的区别这篇文章参考了一下几个链接: https://www.zhihu.com/question/24529373/answer/29135021 http://www.w3cplus.com/css/inline-blocks.html 感谢你们的无私分享以及钻研的精神. 浮动最早是用来实现文字环绕图片用的,而不是像现在很多地方用来砌砖头用. inline-bloc…

css - Position定位属性与层级关系

今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Css中Position定位属性与层级关系</title> <style type="text/css"> #W{ position: relati…

position absolute 绝对定位设置问题

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

position:absolute绝对定位解读

position:absolute绝对定位解读摘要用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景常常遇到这样一些问题,很容易混淆.“浏览器屏幕”,html,body谁的范围大?如果一个html文档中没有relative元素,那么该absolute元素是相对于哪里进行定位的?左上角?浏览器?html?body?等等类似的问题,只要涉及到定位就总要花一些时间去调试.本文的目的在于当遇到问题时,能够以文中阐述的观点作为依据,快速定位和解决问题…

position:absolute/relative/fixed小结

1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏移量都是0,那么它将漂浮在原来的位置上,否则,会根据相对该元素外的第一个非static属性的元素进行定位,如果没有非static属性的父元素,则相对于body定位.当偏移后超出浏览器视线的向下或向右的内容不会被隐藏,而是会出现滚动条,但是向左或向上的内容超出后会被隐藏. 2.相对定位:positio…

css position:absolute 如何居中对齐

写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center…

关于position:absolute的困惑

今天在学习<精通css>时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的position:absolute(注意:此时父级并没有设置position),然后用left:-999em将下拉菜单隐藏到屏幕左边,然后在父列表项中添加鼠标悬停伪选择器,ul li:hover ul{left:auto},这样,当鼠标移动到父列表项时,就会在合适的位置出现下拉菜单. html: <ul class…

IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “> <div id=”layer2″ style=”position:absolute; background-color:#ccc;”>Absolute (layer2)</div> <div id=”layer3″ style=”margin:30px auto; widt…

css position: absolute、relative详解

CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab…

CSS绝对定位和相对定位 position: absolute/relative

absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute属性. relative(相对定位): 对象会保持在HTML文档流中,对象原本占有的空间不会被覆盖,对象根据前一个对象进行位子偏移. 1.单独设置对象的absolute属性和top,left,right,bottom属性,对象定位方式是以body对象为基准进行偏移的. <style type="…

层模型--绝对定位(position:absolute)

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口. 如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px. div{ width:200px; height:200px; border:2px red solid…

关于css float 属性以及position:absolute 的区别。

1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块级元素,会单独占据一行. 先看看最基本的块级元素如何排列的.html代码,以下样式都是基于此. <div class="boxBg"> <div class="box1"> 框框1 </div> <div class="…

position: absolute;绝对定位水平居中问题

position: absolute;绝对定位水平居中问题用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋.让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. 1.使用自动外边距实现居中 CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可.在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div.需要特别注意的一点就是,必须为该容…

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

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

浅谈position: absolute和position:relative

一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 2,css定位机制: 普通流:普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局. 浮动:float(left/right) 定位:position(static/relative/absolute) 我的总结和理解:…

CSS position: absolute、relative定位问题详解

CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠. TRBL属性(TOP.RIGHT.BOTTOM.LEFT) 当设定position:absolute 如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位如果父级(无限)设定p…

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

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

脱离文档流两操作，float和position:absolute的区别

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位.需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围.而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它. float时: <html> <…

CSS--position:relative和position:absolute

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

子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素

纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial…

绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位后margin: 0 auto;居中失效的解决方法</title> <style type=&q…

CSS position:absolute浅析

一.绝对定位的特征绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绝对定位的特征</title> <style> .box1,.box2,.box3 { backgrou…

绝对定位常见误区：position:absolute相对于谁定位、及当溢出时怎么隐藏

1.绝对定位元素溢出父元素,怎么隐藏问题? 通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏! 但是,对于position:absolute定位的子元素,仅仅使用overflow:hidden没办法将其溢出部分隐藏,需要在父元素上也加上一个定位position:relative;才能将含有position:absolute属性的子元素进行溢出隐藏! 绝对定位元素相对的元素是它最近的一个祖先,该祖先满足:pos…

CSS之float vs position:absolute

补充:ul 应该设置下 list-style: none; 题外话:看了张鑫旭的视频,这家伙把简单的css玩出了新花样,绝对大神级的存在.膜拜下先~ float的作用前面一章已经说过了,但没考虑过的是 position:absolute 作用与float极其类似. 二者都是将自身浮空(垂直于屏幕) -- 其实是将其容器高度塌陷. 不同点在于:float会改变位置,但 position:absolute 则会保存其原有位置!!! 利用 position:absolute 的这个特性,我们可以更好的…