使用CSS在站点上的特定位置设置DIV

Question

我正在尝试使用以下代码在我网站的特定网站上放置DIV：

<div style="position: fixed; left: 780px; right: 0; width:285px; z-index:9999; display:block; top:60px; color: #000; background-color:#fff; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; box-shadow:0px 2px 5px #303030;">TEXT</div>

它在我的屏幕上运行良好，因为我的屏幕分辨率是1240px宽度（记住小的通知是我试图设置的DIV）：

但是，如果我在另一台具有不同屏幕分辨率的计算机上看到该网站，它会更改显示位置，因为它从左侧设置了780px。

有没有办法从中间而不是左边（或右边距）设置它？

我可以这样做吗？

Answer 1

有一种从中间定位的简单方法：

CSS：

#your-container {
 position: fixed or absolute
 left: 50%
 width: must have a fixed width (eg 250px)
 margin-left: -(width / 2) plus or minus offset (eg: -(250px / 2) for centered position or -(250px / 2) + 100px for position 100px to the right from the center)
}

PS这只是为了回答你的问题，但我也倾向于在他的评论中给出@Hashem Qolami的建议！

PPS have a look this CODEPEN | maybe this strategy will work your scenario...

希望它有所帮助：）

Answer 2

由于您尝试将元素放置在语言选择元素下方，因此首先要确保语言元素明确定位（可能是position:relative），然后记住＆＃34;记住＆＃34;元素是语言元素的子元素，然后绝对定位它（看起来像是right:0; bottom:20px或类似的东西）。

Answer 3

看起来你正试图重新发明轮子。您有两个选择：

修改您的代码：

<div style="position: fixed;  right: 20px /* or whatever you want */; width:285px; z-index:9999; display:block; top:60px; color: #000; background-color:#fff; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; box-shadow:0px 2px 5px #303030;">TEXT</div>

要注意这种方式你总是会显示那个盒子，如果标题是固定的，这可能会很好，否则它会在滚动上看起来很糟糕，因为即使导航器不在那里它也会显示。

另一种方法（例如，如果您有非固定导航）：

<div style="position: absolute; right: 20px; width:285px; z-index:9999; display:block; top:60px; color: #000; background-color:#fff; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; box-shadow:0px 2px 5px #303030;">TEXT</div>

底线是您需要将元素从右侧定位而不是左侧轴