CSS 상대, 절대 위치 지정

-4

게시 한 그림의 레이아웃에 대한 반응이 빠른 CSS 코드가 필요합니다. 기본적으로, <divs>에 대한 상대 너비뿐만 아니라 상대 및 절대 기술을 사용하여 <div> 사진 갤러리 상단에 front picture을 가지고 있어야합니다. 네비게이션 로고는 상대적인 절대 기술로 구현되어야합니다.
대단히 감사합니다.CSS 상대, 절대 위치 지정

다음은 CSS 및 HTML 코드입니다. 누군가가 이미지에서 레이아웃을 달성하기 위해 어느 div가 절대적이어야하고 어떤 상대가 상대해야 하는지를 알 수 있습니까? 많은 감사

그리고 CSS : Z- 색인 및 2 : 당신은 단순히 '상대가'두 개의 속성 세트, 하나의 기준을 설정하는 것을 깨달을 필요가

body { 
font-size: 1em; 
border: solid red; 
width: 80%; 
margin: 0 auto; 
border-radius: 6px; 
list-style: none; 
} 

#wrapper{ 
width: 100%; 
background: yellow; 
position: relative; 
} 



#logo { 
float: right; 
} 


#nav { 
list-style: none; 
} 

#nav li { 
float: left; 
list-style: none; 
} 

#nav li a { 
display: block; 
padding: 8px 15px; 
text-decoration: none; 
font-weight: bold; 
color: #069; 
} 

#nav li a:hover { 
color: #c00; 
background-color: #fff; 
} 


#paragraph { 
width: 30%; 
top: 10%; 
left: 20%; 
z-index: 1; 
position: absolute; 
} 

#paragraph2 { 
width: 80%; 
background: #332211; 
top: 20%; 
left: 10%; 
position: absolute; 
} 

img { 
max-width: 100%; 
} 

footer { 

margin: 0 auto; 
width: 100%; 
background: #123456; 
}

출처

2012-09-26 Linards Berzins

그럼 ... 무엇을 시도하고 궁금한 점이 있습니까? – sbeliv01

html/css를 처음 사용하는 경우 반응이 빠른 프레임 워크를 고려해보십시오. http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates- 설명/ –

아니 메신저 나를 위해 그것을 묻지 않는 메신저 난 그냥 모든 상위, 오른쪽 값과 절대 위치에 div 및 나머지 div 요소를 할당하여 다른 기술을 시도했다. 조금 작동하지 않았다. –

위치 . '앞'을 높은 zindex로 만들고 상대적으로 위치를 잡습니다.

해당 블록 div로 요소를 래핑하면 해당 블록 div의 너비를 통해 하위의 너비가 계산되고 래퍼의 왼쪽/위쪽의 parentOffset과 함께 배치됩니다.

<div style="position:relative; display: inline; display:block; overflow: hidden; clear: both;"> 
    <div class=front style="position:absolute;left:XXX %; width: 15%; z-index: 100;"></div> 
    <div class=other style="width: 100%; z-index: 10"> 
    <span />   <!-- ,,,, --> 
    <ol><li /></ol> 
    </div> 
</div>

출처

2012-09-26 18:32:11 mschr

감사합니다 @mschr –

CSS 상대, 절대 위치 지정

답변

관련 문제