Questions tagged «css-position»

我正在尝试使div position:fixed在页面上居中对齐。 我始终能够使用此“ hack”与绝对定位的div做到这一点 left: 50%; width: 400px; margin-left:-200px ...其中margin-left的值是div宽度的一半。 这似乎不适用于固定位置的div，而只是将其最左角放置在50％处，而忽略margin-left声明。 关于如何解决此问题的任何构想，以便我可以使固定定位的元素居中对齐？ 如果您能告诉我一种比上面概述的方法更好地居中对齐绝对定位元素的方法，我将提供额外的M＆M。

126 html  center  alignment  css-position 

位置：sticky现在可在某些移动浏览器上使用，因此您可以使菜单栏随页面滚动，但是每当用户滚动通过时，便会停留在视口顶部。 但是，如果您想在当前“粘滞”时稍微改变粘滞菜单栏的样式，该怎么办？例如，您可能希望栏在页面上滚动时始终带有圆角，但是一旦它粘在视口的顶部，您就想摆脱顶部的圆角，并在其下方添加一个小阴影它。 是否有任何类型的伪选择器（例如::stuck）针对具有position: sticky 和当前粘附的元素？还是浏览器供应商正在准备中类似的东西？如果没有，我将在哪里提出要求？ 注意 javascript解决方案对此不利，因为在移动设备上scroll，用户释放手指时通常只会得到一个事件，因此JS无法知道滚动阈值通过的确切时间。

109 css  css-selectors  css-position 

我对此稍作停留，以为我会分享这个position: sticky+ flexbox陷阱： 在将视图切换到Flex Box容器之前，我的粘性div工作正常，并且当将div包裹在flexbox父级中时，div突然变得不粘性。 .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: red; } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box </div> </div> 运行代码段隐藏结果展开摘要 JSFiddle显示问题

105 css  flexbox  css-position  sticky 

我有一个元素，其中包含以下CSS： .elem { left: 0; position: fixed; right: 0; width: 60%; z-index: 1000; } 元素不会覆盖整个屏幕。我希望它“对齐”到屏幕的右侧。 如果我刚刚删除left：0，这将很容易，但是我无法篡改上述CSS，因此我需要一些CSS或Jquery来覆盖，禁用或删除left：0 CSS。 感谢帮助！

103 css  css-position 

任何一个可以告诉我之间的差异style = "position:absolute"和style = "position:relative" 以及它们如何在不同的情况下，我把它添加到div/ span/ input元素？ 我现在正在使用absolute，但是我也想探索relative。这将如何改变定位？

103 css  css-position 

我有一个div放置fixed在网页的左侧，包含它的菜单和导航链接。它没有从CSS设置高度，内容由高度决定，宽度固定。问题是，如果内容太多，div则将大于窗口的高度，部分内容将不可见。（滚动窗口无济于事，因为位置在fixed，因此div不会滚动。） 我试图进行设置，overflow-y:auto;但这也无济于事，div似乎没有注意到它的一部分在窗口之外。 如果div挂在窗外，如何才能仅使内容滚动（如果需要）？

94 html  css  css-position 

我试图将div插入正文的任何​​部分，并使它position: absolute相对于整个文档，而不是具有的父元素position: relative。

93 html  css  css-position 

是否可以使侧边栏导航始终固定在流体布局中的滚动上？

92 css  twitter-bootstrap  css-position  fluid-layout 

我不确定我是否完全理解这两者之间的区别。 有人可以解释为什么我会在另一个上使用它们吗？它们之间有何不同？

91 css  css-position 

我有3个div元素。 第div一个更大（包装）并具有position:relative; 第2个相div对于第1个div相对位置绝对定位（并包含在第1个中div） 第3个div包含在第2个中，div并且也具有绝对定位。 <div id="1st"> <div id="2nd"> <div id="3rd"></div> </div> </div> 为什么第3个div位置相对于第2个div绝对位置（这也是第1个位置的绝对位置div）而不是div相对位置的第一个位置？ 因为3rddiv是绝对定位到2nd绝对定位div。

89 html  css  css-position 

在CSS中，静态（默认）定位和相对定位之间有什么区别？

88 css  static  positioning  css-position 

我在覆盖一些插件CSS时遇到问题。直接编辑CSS并不是真正的选择，因为这会使更新插件的风险更大。 问题：元素具有绝对定位，并且在原始元素中具有top：0px。我想用bottom：0px覆盖它。 为了举例 .element {position:absolute; top:0;} /* in another file */ .my .element {bottom:0;} 在Firefox上可以正常使用（底部样式为0），但Safari / chrome似乎并没有超越顶部：0。 我可以解决此问题，但是提出一个干净的解决方案将是很好的。

82 css  webkit  css-position 

我在图片的绝对位置上放置了两个锚点，这些链接在其他浏览器（Chrome，FF，Safari）中都是可单击的，但在IE中是不可单击的（到目前为止已在8和9中进行了测试） 奇怪的是，如果我给链接一个background-color可单击的链接，但是如果将链接background-color设置为transparent（这就是我想要的），它们将不再可单击，我也尝试设置zoom:1但没有运气。我猜想hasLayoutIE 8/9中IE的功能已经消失了，所以zoom现在对于这类问题的猜测已经不重要了。 有什么想法可以使这些链接以透明的bg出现在IE 8/9中吗？ 这是我一直在使用的小提琴：jsFiddle示例 我有以下HTML布局： <div id="content"> <img src="http://placehold.it/724x300" width="724" height="300" alt="woot" /> <div id="countdown"></div> <a id="link1" href="http://www.stackoverflow.com" title="link1"></a> <a id="link2" href="http://www.stackoverflow.com" title="link2"></a> </div> 和CSS： body {text-align:center;} #content {position:relative; width:724px; height:300px; margin:0 auto;} #countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;} #link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;} #link2 {position:absolute; …

70 html  css  internet-explorer  css-position 

我一直在开发网站，并从相当不错的jQuery Sticky Kit插件中受益。通过在适当的时候在position属性之间fixed来回切换来进行操作。在桌面上运行非常流畅，在移动设备上也可以接受。 或至少它曾经如此。iOS 9具有新的行为：如果position元素的元素从static/ relative/absolute变为fixed滚动动画进行中，则元素将不可见，直到滚动停止为止。奇怪的是，执行相反的更改（从fixed其他更改）没有问题。 一个有效的示例可以在插件的主页上找到。黑色导航栏（“示例参考”）应该是粘性的。最初它static位于页面中间。向下滚动时，它变成fixed和（在iOS 9中）消失，直到滚动停止。在桌面浏览器和iOS 8中的行为是正确的。 我有点希望采用典型的CSS解决方法：强制进行3D转换，禁用背面可见性等，使专有属性晦涩难懂，但是似乎没有任何效果。 既然它正在起作用，我们是否会完全忘记“可粘”元素？

68 ios  css  css-position  mobile-safari  ios9 

我有以下代码段（需要以全屏模式查看），我试图将<main>元素直接放置在元素下方<header>。我将<header>其固定在一个位置，因为当用户滚动浏览内容时，我希望它停留在屏幕顶部<main>元素中。我已经尝试了所有我知道的东西，但是我能想到的最好的办法是将该<header>元素放在该元素的顶部<main>，这样可以减少大部分内容。 我想出的最接近的解决方案是在<main>元素上加上一个推测的顶部填充，以便清除<header>。但是，此解决方案无法很好地说明各种屏幕尺寸，因为我使用的是rem sizing而不是px。当将多个元素放置在<header>使用相对或基于百分比的高度的元素内时，顶部填充的想法变得更糟。在一个屏幕尺寸上，所有内容都可以完美地排列在一起；在另一个屏幕尺寸上，内容可能相去甚远。 最后，我知道我可以使用jQuery动态设置顶部填充，但是它似乎并不总是能很好地工作。想知道是否有一个纯CSS / HTML解决方案。 谁能告诉我我在这里想念的东西吗？我的最佳填充方法是唯一可行的解​​决方案吗？ $(document).ready(function() { $('#navToggle').click(function() { $("div#bottom-container > nav").slideToggle(); }); $(window).resize(function() { if(window.innerWidth >= "751") { $("header > div#bottom-container > nav").show(); }else { $("header > div#bottom-container > nav").hide(); } }); $("header > div#bottom-container > nav > ul > li > a").click(function(e) { if (window.innerWidth <= …

15 html  css  css-position  fixed