절대 위치 아래 이미지 위치

친구를위한 웹 사이트를 만들고 있습니다. 그러나 절대 위치에있는 이미지 아래에 4 개의 섹션을 포함하는 div를 배치하려고합니다. 이것은 자바 스크립트를 사용하지 않고 창 크기의 변경으로 크기를 조정하려는 경우에 맞아야합니다. 누구든지이 일을 할 수있는 방법을 생각할 수 있습니까?절대 위치 아래 이미지 위치

을 Heres 페이지 :

https://dl.dropboxusercontent.com/u/24713212/0001_Adam_Plowdem_Videography/html/index.html

는 기본적으로 나는 밝은 색 부분이 바로 이미지에 상관없이 브라우저 크기 후 시작합니다.

정말 도움이, 감사 감사,

매트는 그 아래에 DIV 스타일을 같이 할 수

<style> 

body{ 
width: 99%; 
height: 1050px; 
background-color: #FFF; 
font: 80%/1.65 "Open Sans", sans-serif; 
} 

#header{ 
width: 100%; 
height: 50px; 
position: fixed; 
top:0; 
left:0; 
background-color: #FFF; 
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%); 
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%); 
/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%); 
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EBE8E4)); 
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%); 
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #EBE8E4 100%); 
border-bottom: 1px solid rgba(0,0,0,0.4); 
} 

#nav{ 
width: 600px; 
position: absolute; 
top: 0; 
right:0; 
height: 50px; 
margin-right: 20px; 

} 

#nav ul{ 
list-style: none; 
height: 50px; 
position: absolute; 
top: 0; 
margin: 0; 
display: block; 
right:0 !important; 
} 

#nav li{ 
display: inline-block; 
height: 50px; 
border-bottom: none; 
text-transform: uppercase; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

#nav li a{ 
display: block; 
height: 50px; 
padding-top: 16px; 
padding-left: 20px; 
padding-right: 20px; 
padding-bottom: 0px !important; 
border-bottom: none; 
color: #000; 
text-decoration: none; 
/*text-transform: uppercase;*/ 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

#nav a:hover{ 
color: #000; 
background: rgba(0,0,0,0.1); 
-webkit-transition: all 0.15s ease-out 0; 
-moz-transition: all 0.15s ease-out 0; 
transition: all 0.15s ease-out 0; 
} 

.banner { 
height: 100%; 
width: 100%; 
color: #fff; 
text-align: center; 
background: url(img/adam.jpg) center center; 
background-size: cover; 
position:absolute; 
top:50; 
left:0; 
z-index:-2; 
border-bottom: 1px solid rgba(0,0,0,0.4); 
-webkit-box-shadow: rgba(200,200,200,0.9) 0 4px 10px -1px; 
box-shadow: rgba(200,200,200,0.9) 0 4px 10px -1px; 
/*position: relative; 
margin-top: -60px;*/ 
} 

.overlay { 
height: 100%; 
width: 100%; 
color: #fff; 
text-align: center; 
background: url(img/overlay.png) center center; 
background-size: cover; 
position:absolute; 
top:50; 
left:0; 
z-index:-1; 
border-bottom: 1px solid rgba(0,0,0,0.4); 
/*position: relative; 
margin-top: -60px;*/ 
} 


.about { 
min-height: 170px; 
padding: 30px 20px 30px 20px; 
text-align: center; 
background: red; 
display: block; 
} 

.about2 { 
min-height: 170px; 
padding: 30px 20px 30px 20px; 
text-align: center; 
background: blue; 
display: block; 
} 

.about3 { 
min-height: 170px; 
padding: 30px 20px 30px 20px; 
text-align: center; 
background: yellow; 
display: block; 
} 

.about4 { 
min-height: 170px; 
padding: 30px 20px 30px 20px; 
text-align: center; 
background: green; 
display: block; 
} 

#container{ 
background-color: red; 
margin: auto; 
padding: 0; 
width: 1000px; 
height: 70%; 
} 


</style> 

<html> 

<head> 
</head> 

<body> 

<!-- Start Navigation --> 
<div id="header"> 
    <div id="nav"> 
     <ul> 
      <li><a href="#">about</a></li> 
      <li><a href="#">work</a></li> 
      <li><a href="#">gallery</a></li> 
      <li><a href="#">blog</a></li> 
      <li><a href="#">contact</a></li> 
     </ul></div> 
</div> 
<!-- End Navigation --> 

<!-- Start Main Image --> 

<section class="banner" style="height: 100%;"> 
</section> 

<!-- End Main Image --> 
<div style="width: 99%; 
height: 100%;"> 
<section class="about"> 
    <h5>Hello World</h5> 
</section> 
<section class="about2"> 
    <h5>Hello World</h5> 
</section> 
<section class="about3"> 
    <h5>Hello World</h5> 
</section> 
<section class="about4"> 
    <h5>Hello World</h5> 
</section> 
</div> 
</body> 

</html>

출처

2013-10-17 mattmuirhead

일부 코드를 표시하거나 jsfiddle을 만들면, 우리는 바이올린을 할 수 있습니다! –

using position : 절대 문서의 정상적인 흐름에서 해당 항목을 제거합니다. 다른 항목은 그것이 만드는 공간에 응답하지 않습니다. 위치 이외의 다른 값을 사용하는 것이 좋습니다. – jbenjohnson

작성한 코드 관련 문제는 특정 문제를 설명하고 문제를 재현하기위한 유효한 코드를 포함해야합니다. 자세한 내용은 SSCCE.org를 참조하십시오. –

모든 '정보'섹션이 포함되어 있습니다.

height: 100%; 
margin-top: 50px; 
position: absolute; 
top: 100%; 
width: 99%;

이렇게하면 div가 이미지가 끝나는 지점 바로 뒤에서 시작하게됩니다. 이렇게하면 문제가 해결됩니다.

출처

2013-10-17 13:55:12

탑 맨! 고마워요 :) – mattmuirhead

그냥 fyi -이 기술은 이미지의 하단에 브라우저의 하단에 콘텐츠를 배치합니다. 의 높이를 변경 한 경우 상단 높이를 100 % 조정해야합니다. 새 높이는 – jbenjohnson

입니다. 아니요. 이미지 높이가 브라우저의 100 %로 설정되어 있으므로 상단이 : 100 % 효과가 있습니다. 높이를 줄여야하는 경우 상단에 동일한 값을 설정해야합니다. –

절대 위치 아래 이미지 위치

답변

관련 문제