div 중첩 및 중심

Question

Google지도 API를 사용하고 생성 된지도를 배경으로 설정하려고합니다.

이

은

<div class="content"> 
    <div class="map"></div> 
    <div class="element"></div> 
</div> 

CSS의

.content { 
    position: relative; 
    height: 500px; 
} 

.map { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

.element { 
    position: absolute; 
    width: 900px; 
    margin-left: auto; 
    margin-right: auto; 
    z-index: 1; 
} 

내 HTML 인 사이트는이

|-------------------------------------| 
|          | 
|          | 
|          | <- Other content 
|          | 
|-------------------------------------| 
|.map |-------------------------|  | 
|  |.element     |  | <- The concerned content (.content) 
|  |       |  | 
|  |-------------------------|  | 
|-------------------------------------| 

같이하도록되어 그러나 결과는 동일하지 않습니다. 마진을 남긴 자동차는 물론 작동하지 않습니다. 중첩은 괜찮지 만 오른쪽 여백도 있지만 왼쪽 여백을 위해 어떻게 할 수 있습니까? 내 사이트는 항상 중심에 위치해야합니다.

감사합니다. 앨런에서

해결 방법 : DOM 요소가 절대적으로 위치를

.content { 
    position: relative; 
    height: 500px; 
} 

.map { 
    position: absolute; 
    width: 100%; 
    height: 100%; 

    z-index: 0; 
} 

.element { 
    position: relative; 

    width: 900px; 
    margin-left: auto; 
    margin-right: auto; 
    z-index: 1; 
} 

Answer 1

사용 : 요소 이후

.element { 
    left:50%; 
    margin-left:-450px; 
    position:absolute; 
    z-index:1; 
} 

은 900px (명시 적으로 선언)을 폭 이 방법으로 중앙에서 왼쪽으로 450 픽셀 위치시키고 전체 요소를 중심에 배치합니다.

브라우저가 900px 너비 아래로 줄어들 때 예기치 않은 결과가 나타납니다. 관련성이있는 경우 미디어 쿼리로 그 값을 잡아야합니다.

Answer 2

여백 자동 작동 실 거예요.

부모가 특정 너비 값을 갖고 있다면, 당신은 당신의 .element 항목의 위쪽 및 왼쪽 속성으로 재생해야합니다.

또 다른 방법은지도의 z- 색인을 0 또는 음수 값으로 설정 한 다음 .element를 상대 위치로 설정하기 만하면 자동 값에 여백을 사용할 수 있습니다.

사용해보기.

와 당신이 필요로하는 경우에, 나는 당신을 위해 jsfiddle을 만들 수 있습니다,하지만 난 당신의 맵 코드도 필요합니다