草庐IT

绝对化

全部标签

html - CSS 使用绝对 div 模糊并保留锐边

如果img没有设置为绝对值,这会工作得很好:divimg{filter:blur(5px);-webkit-filter:blur(5px);-moz-filter:blur(5px);-o-filter:blur(5px);-ms-filter:blur(5px);margin:-5px-10px-10px-5px;}div{margin:20px;overflow:hidden;}工作正常的示例:http://jsfiddle.net/ThinkingStiff/b8fLU/(取自另一个问题)但是,如果我想使用背景图像对绝对div执行此操作怎么办?#background{-webk

html - CSS中绝对定位和相对定位之间是否存在父子关系?

我是编码和CSS领域的新手。看了很多关于relative和absolute定位的文章,我的理解是这样的。但是,我不确定absolute位置是否应该是父relative位置的子位置,反之亦然。有4种位置属性,即static、relative、absolute和fixed。如果元素具有相对位置,它仍然是文档正常流的一部分。但是,它可以通过属性top、right、bottom和left进行偏移。它也可以被赋予一个z-index值并自动定位在静态元素之上它还提供了一种包含作为其代码块一部分的子元素的方法,尽管我不确定这到底意味着什么。根据这些信息,这是否意味着位置为absolute的元素应该是

html - 如何选择与绝对定位 DIV 重叠的选项?

我有一个绝对定位的div,它像工具提示一样工作。在鼠标悬停在某个元素上时它会显示,然后在鼠标移出时隐藏。我很少页面中放置在工具提示元素上方的元素。在正常情况下,工具提示div将出现在选择标签上。但是,当用户单击选择标签并显示选项时,它会与工具提示重叠。为select或options标签提供更高的z-index无效。下面是一个示例代码来说明问题。SelectOptionsOverlappingAbsolutePositionedDIVUnitedStatesCanadaMexicoJapanOverlappingDivCSSselect,options{z-index:10;}#top-

html - SVG foreignObject 的行为就像在 Webkit 浏览器中绝对定位一样

我正在HTML文档中使用SVG。由于某些原因在Chrome中,任何中的任何内容元素出现在的左上角元素的父元素;好像元素是绝对定位的什么的。我在Firefox中没有这个问题。这可能是什么原因造成的?我该如何解决?这是我的测试用例:(theexampleisalsoonJsFiddle)SVGbuginChrome?code{background:#FFFAEE;}precode{display:block;}.widget-body{background:yellow;position:relative;/*Thisistheproblem!*/}SVGbuginChrome?Theel

html - CSS 像素真的是一个绝对单位吗?也就是说,1 inch = 96px 是真的吗?

官方W3Cdocumentation说:1px=1/96thof1in在我之前的18.5英寸屏幕中,screen.width是1367px并且以英寸为单位的屏幕宽度是14英寸。通过W3C公式:14*96px=1344pxW3C公式偏离了每英寸20/14像素。由于偏差太小,而我屏幕上的1inch是97.4px我接受了W3C的公式,认为一个CSS像素是的绝对单位measure,这意味着它始终等于0.75pt(一个物理单位)。这周我买了一个21.5英寸的全高清屏幕,宽度为19英寸,screen.width为1920px。所以现在我屏幕上的1英寸是:1920/19~101px不仅如此,我fri

javascript - 桌面 webkit (safari/chrome) 中带有绝对定位元素的奇怪渲染错误

如果您在这里观看视频:http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov-你会看到实际的问题。基本上,我有以下几点:TEXTHERETabOneTabTwoTabThreeTabFourSidenav是绝对定位的,像这样:#sidenav{position:absolute;top:200px;left:0px;width:770px;padding:30px0px20px;background:rgba(255,255,255,0.85);-webkit-transition:left0.75sease-in-

html - 如何将 css max-left 或 min-left 位置放置到绝对对象?

我有一个元素:position:absolute;left:70%;例如,我可以将元素配置为不从左侧移动超过900像素吗?类似于max-width但用于定位? 最佳答案 您可以使用CSS3媒体查询来实现这一点所以:#element{position:absolute;left:70%;}如果您不希望它在屏幕较小或调整大小时覆盖对象窗口,您可以在之后添加:@mediaalland(max-width:980px){#element{margin-left:0px;left:220px;}}当屏幕宽度小于980px时,#element对

javascript - 使用 jQuery 获取元素在屏幕上的绝对位置

如何使用jQuery找出元素在当前可见屏幕(视口(viewport))上的绝对位置?我有position:relative,所以offset()只会给出父级内的偏移量。我有分层div,所以$("#me").parent().offset()+$("#me").offset()也没有帮助。我需要窗口中的位置,而不是文档中的位置,因此当滚动文档时,该值应该改变。我知道我可以将所有父偏移量相加,但我想要一个更简洁的解决方案。vartop=$("#map").offset().top+$("#map").parent().offset().top+$("#map").parent().pare

html - CSS - 使用绝对位置时链接不可点击

这是我的标题的HTML脚本:Signin这是CSS脚本:.logo{padding:30px0;}.logoimg{display:inline;}.toplink{position:absolute;bottom:40px;right:280px;font-size:14px;}.search{position:absolute;bottom:10px;right:0;font-size:14px;width:330px;}Signin链接无法点击,但是当我删除绝对位置时,它可以正常工作。有没有办法在保持位置的同时使链接工作?任何建议表示赞赏,并提前致谢。-编辑-原来问题出在其他地方

html - 在绝对定位的容器内保留正常的自动换行

我在相对定位的容器中有一个绝对定位的文本block。绝对定位的元素超出其容器的右边界。问题是:文本没有正常换行;它过早地中断而不是扩展到其定义的max-width:观察到的行为:期望的行为HTML/CSS(JSFIDDLE:http://jsfiddle.net/WmcjM/):.container{position:relative;width:300px;background:#ccc;height:100px;}.text{position:absolute;max-width:150px;left:290px;top:10px;background:lightblue;}Lor