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固定定位

帮助是非常感谢！谢谢。

来源

2012-07-13 Emily Ryder

你可以创建一个的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

如果我理解正确，this is what you're after。

您需要添加一个带有绝对位置的容器，以便将内容移到右侧，然后使用固定位置容器将其保留在您需要的位置。

来源

2012-07-13 09:57:33 Jayx

这完美无缺！谢谢！我一直在努力工作。我在24小时内得到了答案！ **注意其他人在寻找相同的代码：** 我申请了** Jayx **的代码给我，起初它没有工作，但我注意到他的'。内容'包含'位置：相对;'然后我添加到我的工作。良好的经验法则，如果你正在使用固定位置的div，则为：0px;和一个最大宽度的网站：**内容是相对的，标记是绝对的，div是固定的。** 再次感谢您！ – 2012-07-13 21:13:27

为什么不这样做，如果div'.marker'被放置在底部，在html中div'.content'文本下面？ – PetaspeedBeaver 2016-04-13 18:42:51

我得到了它，没有问题的工作在jsfiddle。您可能想要查看影响该区域的CSS。如果＃内容是不是块级元素（没有宽度将被应用，这样，您提供更多的代码将是很大的帮助，所以我们确切地知道发生了什么事，可以帮助你了解更多，您可能会出现问题。

来源

2012-07-13 09:03:56 AlexM

这个问题是不是刚开存在问题的容器粘在右上角，但坚持到＃内容div的右上角 - 扩大你的小提琴窗口，看看它是如何坚持到浏览器窗口的右侧，不是#content。 – Jayx 2012-07-13 10:00:36

我认为你需要这一个：

#content { 
    margin: 0 auto; 
    max-width: 1000px; 
    height:20px; 
    background:yellow; 
    position: relative; 
} 
#div { 
    width: 150px; 
    position: absolute; 
    right: 0px; 
}

来源

2012-07-13 09:07:19 RAN

位置：固定不相对于任何容器它是相对于DOM的HTML元素是你看到它在任何你做最右边的原因到#content。

来源

2012-07-13 09:12:34 AdityaSaxena

和..如果你可以采取我的建议..请不要给'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; 
}

来源

2017-01-27 02:06:43

CSS：固定位置，右：0像素，但不会服从最大宽度

回答

相关问题