CSS : 절대 중첩 된 DIV를 왼쪽으로 정렬

콘텐츠가있는 드롭 다운 목록이 있습니다. 나는 화면의 왼쪽에 0px에서 내용을 정렬하려고 노력하고있어. 아무리 노력해도 부모 컨테이너 내에서 정렬 된 상태로 유지됩니다.CSS : 절대 중첩 된 DIV를 왼쪽으로 정렬

브라우저에서 드롭 다운이 중앙에 위치하므로 원하는 위치로 이동하는 데 어려움이 있습니다.

<div id="sticky"> 
    <div id="nav"> 
     <div class="logo">logo</div> 
     <span class="n list">browse</span> 
     <span class="n list">search</span> 
     <div class="n drop"> 
      <span>My Account</span> 
      <div> 
       hello, world! 
      </div> 
     </div> 
    </div>

http://jsfiddle.net/XkuHy/2/

참고 : CSS하지 내 강점 입니다.

참고 2 : StackOverflow는 jsFiddle에 대한 링크가 아니라 필요한 코드에 대해 계속 매달려 있습니다. 왜 코드를 무시했는지 모르겠지만 바이올린에서 볼 수 있습니다. 이 상대 위치를 갖기 때문에

출처

2012-12-30 Alex Guerin

"StackOverflow는 jsFiddle에 대한 링크가 아니라 필요한 코드에 관한 것이 었습니다. 이유는 확실하지 않습니다."... 그들은 jsfiddle을 소유하고 있지 않습니다. 언젠가는 갑자기 나타나면 어떻게 될까요? 문맥없이 수천 개의 질문을 남깁니다. 모든 코드를 여기에 넣어야합니다. – Popnoodles

.content 박스는 부모에 .n.drop DIV를 대해 위치되고있다. .n.drop 요소에서 상대 위치를 제거하면 .content 요소가 원하는 위치에 배치됩니다. .content 요소에 margin-top: 16px;을 추가해야 메뉴를 지울 수 있습니다. 당신은 그것의 마진이 0 픽셀 수 있도록하면 http://jsfiddle.net/XkuHy/14/

출처

2012-12-30 02:26:12 Godwin

Chrome (Windows)에서 'orld!'를 볼 수 있습니다. 만! 파이어 폭스에서 나는 "d!"만 볼 수 있습니다. – sadaf2605

@ sadaf2605, 나는 그것을 여기에서 보지 않고있다. 그리고 나는 그것을 보지 않고 무엇이 그것을 초래할지도 모른다라고 확신하지 않는다. – Godwin

@ sadaf2605, 지금이 원인이 무엇인지 알 수 있습니다. 창 크기가 800px 미만이어야하며 'nav' 요소가 절대 위치 지정으로 설정되어 있어야합니다. 절대 위치 지정을 제거하기 위해 jsfiddle을 업데이트했지만 여전히 'margin : auto;'를 추가하여 중심에 위치 시켰습니다. – Godwin

는 현재 업데이트 된 데모를 볼 수 있습니다. 그것은 0px로 갈 것이지만 그것의 부모를 존중합니다. http://jsfiddle.net/XkuHy/13/

을하지만 둘은 크로스 브라우저 비교 문제를 갖고이 같은 http://jsfiddle.net/XkuHy/13/ 또는

left: -345px;

이 같은

margin-left:-205%;

을 : 그래서 당신은 CSS에 음수 값의 마진을 시도 할 수 있습니다.

.drop:hover .dropmenu{ 
    position: fixed; 
    top: 100px; 
    left: 0; 
    width: 100%; 
    height:100px; 
    padding:0; 
    margin:0; 
    z-index:998; 
    background-color:white; 
}

서프라이즈 :

난에 "Hello World"가 "dropmenu"의 클래스 이름을 가지고 CSS,이를 추가하여이 문제를 해결했다! 놀람! 나는 그것이 효과가 있다고 생각한다! 체크 아웃 : http://jsfiddle.net/XkuHy/10/

출처

2012-12-30 02:53:23 sadaf2605

CSS : 절대 중첩 된 DIV를 왼쪽으로 정렬

답변

관련 문제