Question

我正在制作一个非常小的启动页面，它只有两个链接和一个带有一些居中文本的大型居中背景。文本也是图像的一部分。链接绝对位于相对定位的容器中。

链接在大于1024px的屏幕上精确定位，这是容器的大小。一旦屏幕变小，链接的位置就不再在正确的位置。这是因为它们与容器有关，而与浏览器窗口无关。

这个网站不应该响应，但即使窗口变小，链接仍然位于正确的位置会很好。这是否可能，或者我目前的方法不是紧张的？

您可以通过以下链接查看该页面：http://nionwebdesign.com/dev/physical页面上的链接是Facebook链接，徽标位于底部。

当前加价：

<!DOCTYPE html>
<html>
<head>      
</head>
<body>

<div class="container">

<a class="facebook" href="#"><img src="img/facebook.png"></a>
<a class="logo" href="#"><img src="img/logo-intime.png"></a>

</div>
</body>
</html>

当前的css：

body{
background: #000 url('img/bg-leeg.jpg') no-repeat center top;
min-height: 900px;
}

.container{
width: 1024px;
margin: 0 auto;
position: relative;
}

.facebook{
position: absolute;
top: 628px;
right: 62px;
}

.logo{
position: absolute;
top: 778px;
right: 20px;
 }

Answer 1

Facebook和徽标的链接可以放在容器外面。像这样，他们不依赖于容器的位置（不能总是在中间位置）。

我已经将链接放在容器外面（在无关紧要之前或之后），然后给他们新的职位（不要担心，他们是相同的，只是重新计算！）< / p>

我的代码：

HTML

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="container"></div>
    <a class="facebook" href="#"><img src="img/facebook.png"></a>
    <a class="logo" href="#"><img src="img/logo-intime.png"></a>
  </body>
</html>

CSS

body{
    background: #000 url('img/bg-leeg.jpg') no-repeat center top;
    min-height: 900px;
}

.container{
    width: 1024px;
    margin: 0 auto;
    position: relative;
}

.facebook{
    position: absolute;
    top: 628px;
    left: calc(50% + 192px);
}

.logo{
    position: absolute;
    top: 778px;
    left: calc(50% + 351px);
}

在较小的屏幕上绝对定位布局问题

1 个答案: