CSS:固定位置,右:0像素,但不会服从最大宽度
我不能定位,最大宽度,和“右:0像素”来上下一心!我正在创建一个固定在我的网站右上角的div。页面内容的最大宽度为1000px,但标签只遵守我的“right:0px”规则并且坚持到右侧,一旦达到最大宽度则违反。还应该注意的是,默认情况下,div位于左上方并且遵循最大宽度(如果我键入'left:0px;',但它不遵守规则并且它会保留在左侧)。CSS:固定位置,右:0像素,但不会服从最大宽度
CSS:
#content {
margin: 0 auto;
max-width: 1000px; }
#div {
width: 150px;
position: fixed;
right: 0px; }
以下是我已经尝试了一些替代方案:
- 宽度:100%(与文本对齐:右)< ---不太对劲,我不喜欢100%的宽度,而不是150px
- 添加代码以将div“手动”放置在html中(不是CSS)
- 我发现float和text-align不是af FECT固定定位
帮助是非常感谢!谢谢。
如果我理解正确,this is what you're after。
您需要添加一个带有绝对位置的容器,以便将内容移到右侧,然后使用固定位置容器将其保留在您需要的位置。
这完美无缺!谢谢!我一直在努力工作。我在24小时内得到了答案! **注意其他人在寻找相同的代码:** 我申请了** Jayx **的代码给我,起初它没有工作,但我注意到他的'。内容'包含'位置:相对;'然后我添加到我的工作。 良好的经验法则,如果你正在使用固定位置的div,则为:0px;和一个最大宽度的网站:**内容是相对的,标记是绝对的,div是固定的。** 再次感谢您! – 2012-07-13 21:13:27
为什么不这样做,如果div'.marker'被放置在底部,在html中div'.content'文本下面? – PetaspeedBeaver 2016-04-13 18:42:51
我认为你需要这一个:
#content {
margin: 0 auto;
max-width: 1000px;
height:20px;
background:yellow;
position: relative;
}
#div {
width: 150px;
position: absolute;
right: 0px;
}
位置:固定不相对于任何容器它是相对于DOM的HTML元素是你看到它在任何你做最右边的原因到#content。
和..如果你可以采取我的建议..请不要给'div'作为任何元素的ID。 – AdityaSaxena 2012-07-13 09:13:26
而不是位置:固定为#div,将其位置设置为**绝对**,并将其容器置于**相对位置** – AdityaSaxena 2012-07-13 09:19:21
#div {
width: 150px;
position: fixed;
right: calc(50% - 500px); /* will move the div as far as 50% of viewport
then move it back to 500px (that is half of max-width) */
}
/* if needed, you can add media query */
@media (max-width: 1000px) {
right: 0;
}
你可以创建一个的jsfiddle? – cchana 2012-07-13 08:40:31
是您尝试分配最大宽度样式的div ??,最大宽度,如果div为空则不可见。 – tomexsans 2012-07-13 08:56:59
我认为你的内容div是空的。 – RAN 2012-07-13 08:59:11