草庐IT

positional

全部标签

jquery - 将 DIV 更改为 "position:fixed"然后将其更改回 "static"并显示其余的 DIV

我有几个div,经过一些滚动后,第二个div将是“position:fixed”,再滚动一些后,它又会回到“position:static”,但问题是:接下来是第4个div而不是第3个(因为当我们在第2个div时它已经通过滚动通过了)。如何在第二个div之后显示第三个div?这是fiddle:http://jsfiddle.net/5vzze/2/HTML:1234567CSS:#container{position:relative;}.slide{min-height:400px;height:500px;width:100%;}jQuery:$(window).scroll(fu

javascript - CSS:性能方面,最好使用 calc 或 position absolute

我有一个固定高度的容器div。在两个div中,顶部高度:50px,另一个必须填充空白区域但允许内部滚动。现在我有两个选择:#up{height:50px;}#down{position:absolute;top:50px;bottom:0;}或:#up{height:50px;}#down{height:calc(100%-50px);}如果我的窗口中有许多这样的案例,那么哪一个是最明智的使用性能?ThisFiddle附言。我不关心旧浏览器的支持。 最佳答案 我总是会使用calc选项。两者可能看起来一样,但实际上并非如此。当您使用p

html - 为什么 IE 在浏览网页时忽略 'tab position',除非使用 'tabindex'?

我正在使用快捷链接来加快浏览网页的速度,这在Chrome和Firefox中运行良好。这是Fiddledemonstratingmyissue.当使用跳过链接更改“选项卡位置”时,然后按TAB关键是,大多数浏览器从那时起继续按顺序跳到可聚焦的交互式或使用tabindex的元素上:SkiptoNavigationSkiptoSearchSkiptoanchorSomeboringcontentcontainingaselectablelink.link1link2anchorwithnohref在此示例中,单击链接时,“制表符位置”将移动到文档中的该位置。紧迫TAB然后将跳转到跳过链接的目

html - 带有 "position:absolute;bottom:0"的 DIV 不会粘在 Firefox 容器的底部

我有这个HTML源代码:StylishWebPagebody{padding:0;margin:0;}div.table{display:table;}div.tableRow{display:table-row;}div.tableCell{display:table-cell;}div.contentWrapper{width:100%;height:760px;position:relative;margin:0auto;padding:0;}div.footerBar{width:inherit;height:60px;background-image:url("BarBG.p

jquery 点击不使用 css 'position :fixed' 属性

当我删除这个属性时它工作正常,为什么会这样?这是jquery函数:$(document).ready(function(){$('#flogo').click(function(){window.alert("clicked");})});Html代码如下:这是CSS:.fixedlogo{position:fixed;//Ifiremovethislinethenjqueryisworking.height:50px;margin-top:-20px;} 最佳答案 这可能是z-index而不是jQuery的问题。jQuery不关心

css - 文本对齐 :center Not working properly on absolute positioned spans

我需要放置2在里面,第一个跨度必须放在顶部,第二个跨度必须放在底部,就像南北一样。NS为此,我考虑使用position:absolute;在2.div{display:inline-block;width:20px;position:relative;height:100px;}.north{position:absolute;top:0;}.south{position:absolute;bottom:0;}现在,跨度应该位于左侧(默认),为了使它们居中,我使用了:div{text-align:center;}但是我得到了这个:查看:http://jsfiddle.net/Zn4vB

javascript - CSS "position:fixed": mobile zoom

我正在尝试解决移动浏览器上css“position:fixed”属性的问题。我有一个固定的div:...othercontenthere...使用CSS:#logo{position:fixed;-webkit-backface-visibility:hidden;bottom:100px;right:0px;width:32px;height:32px;}因此,通常行为完全符合预期,div位置始终位于窗口的右下角,与滚动位置无关。我的问题是,在移动浏览器上,当用户缩放页面时,在一定缩放级别后div位置是错误的(有时div会消失在窗口之外)。我知道移动浏览器不能很好地支持固定位置,但我

html - CSS :before/:after selectors are suddenly being positioned separately of parent div

我换了一台新电脑,突然间CSS:after和:before选择器不再工作了。真正奇怪的是,我之前在另一台计算机上添加的:before/:after选择器在我的新计算机上完全正常显示。但是我现在添加的任何新代码都不会显示,即使我将旧代码复制并粘贴到新的div上也是如此。比如这个:htmlCSS#wtf{width:10px;height:20px;background:red;}#wtf:after{content:"";position:absolute;left:100px;top:10px;width:20px;height:20px;background:blue;}此代码在直接

javascript - 移动优化 : Make notification menu with position:absolute scrollable

我最近买了Moltran这很好但有一个很大的缺点:通知菜单在移动设备上消失,这不适合我。所以我了解到,这可以通过删除li通知元素的hidden-xs类来完成。这将变成至,效果很好。现在我将小菜单拉伸(stretch)到屏幕的整个宽度如果用户使用较小的设备以获得更好的可用性:@media(max-width:767px){.nav>li.dropdown:not(.hidden-xs).open.dropdown-menu{width:100vw;}}一切正常,直到出现一件事:我无法在菜单中滚动。使用现代5"智能手机水平,最后的3个元素被隐藏。相反,滚动会影响由绝对位置引起的背景。关于o

html - CSS : absolute positioning of a button in Firefox

我想显示一个按钮,它占用其父级的所有空间,而父级本身是绝对定位的。但似乎Firefox有一个错误(所有在Chrome和Safari(Webkits)中运行完美,我无法在IE上测试,因为我在mac上(如果有人可以测试并在评论中说它是否运行或不,这将是非常好的))。要达到的目标是:Div和按钮一起包含在一个绝对定位的包装器中。HTML代码是:.wrapper{background-color:red;position:absolute;width:100px;height:100px;}.inner{background-color:blue;position:absolute;top:0