Question

我有一个site，顶部有一个绝对定位的徽标div。它的父亲是100％宽度的相对div。

我设法得到了我的位置：我想要的绝对div与下一个代码：

的CSS：

position:absolute; 
top:0; 
left:50%;
margin-left:-455px; 
background:url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png'); 
width:206px;
height:99px;
z-index:999;

但是我遇到了问题：当浏览器窗口宽度小于网站宽度时，徽标开始移动到屏幕的左侧。

我的问题：

我如何绝对定位与网站中心相关的div，换句话说，我需要将我的徽标定位在远离网站中间位置X px ...

Answer 1

您网站上#headlogo元素的父级是#wrapper，而且位置不对。

因此你应该添加

#wrapper{
    position: relative;
}

或者将#headlogo放在相对定位的#header元素内。

Answer 2

需要上述更改（position：relative;在包装元素中）的原因是绝对定位仅在第一个父元素不是静态（默认）时才起作用。如果它不是静态的，它应该正常运行！

Answer 3

你可以使用jQuery轻松完成。

$(function()
{
var logo_width = width of your logo;
var window_width = $(window).width();
$('#id_of_your_logo').css('left', window_width / 2 - logo width / 2);
}

那应该没问题。）。

Answer 4

我看了你网站的链接。一种选择是将.headlogo放在#header div中（如下所示）：

<div id="header">
    <div class="headlogo"><a href="/"></a></div>
    <!-- rest of the #header content here -->
</div>

...然后将你的CSS更改为：

position: absolute;
top: 0;
left: 0;
margin-left: 25px;
background: url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png');
width: 206px;
height: 99px;
z-index: 999;

因为#header div作为position：relative，所以任何位置：它内部的绝对div都是相对于它而不是body。因此，当窗口大小减小时，它仍将相对于标题，而不是正文。

从网页中心绝对定位div定位

4 个答案: