두 개의 링크와 가운데 텍스트가있는 큰 가운데 배경이있는 정말 작은 스플래시 페이지에서 작업 중입니다. 텍스트도 이미지의 일부입니다. 링크는 상대적으로 배치 된 컨테이너에 절대 배치됩니다.
링크는 컨테이너 크기 인 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;
}
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);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다