較小屏幕上的絕對位置布局問題

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和徽標的鏈接可以放在容器外部。 那樣，它們不依賴於您設置容器的位置（不能始終位於容器的中間）。

我已將鏈接放置在容器外部（之前或之后無所謂），然后將其賦予新位置（不用擔心，它們完全一樣，只是重新計算了！）

我的代碼：

的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 個解決方案

解決方案1
2 已采納 2014-07-04 00:56:21

較小屏幕上的絕對位置布局問題

問題描述

1 個解決方案

解決方案1 2 已采納 2014-07-04 00:56:21

解決方案1
2 已采納 2014-07-04 00:56:21