[css] 상대 위치 대 절대 ​​위치

내 명성이 언급하기에 충분하지 않기 때문에 대답을한다. 그러나 이것을 답으로 보지 마라. 추가 정보는 나 자신과 마찬가지로 바닥 글과 위치에 문제가 있었다.

페이지를 설정할 때 바닥 글이 항상 절대 위치로 맨 아래에 있고 주 컨테이너 / 래퍼가 상대적 위치로 유지되도록 페이지를 설정할 때.

그런 다음 텍스트 내용과 동일한 내용 (머리글과 바닥 글 사이의 흰색 부분)의 메뉴에 문제가 있음을 발견했습니다. 바닥 글을 절대로 설정하면 바닥 글이 더 이상 유지되지 않습니다.

복잡한 주제를 말하면, 포지셔닝입니다.

내 솔루션, 내 웹 페이지의 ‘절대’포지션에서 원했던 콘텐츠에 대한 예를 들어 드롭 다운 메뉴를 열 때 실제로는 상대 위치를 지정하고 드롭 다운 아래에 35em을 배치하는 것이 측면으로 밀리지 않았습니다. 메뉴. (35em은 완전히 확장 된 경우 드롭 다운 메뉴의 높이입니다)

그런 다음 Top : -35em. 이전에 내용을 푸시했습니다. 그리고 margin-bottom : -35em을 추가하십시오. 이렇게하면 내용이 드롭 다운 메뉴 “아래”에 있지만 시각적으로 드롭 다운 메뉴와 나란히 있습니다! 바닥 글 아래의 공백은 10m 정도의 여유를 갖습니다. 그래서 이것에 대한 나의 해결책은 다음과 같습니다.

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

귀하의 질문에 대한 답변은 훌륭하지만 많은 문제가 발생한 후 이것이 매우 좋은 해결책이며 위치 지정 방식을 더 잘 이해하는 방법이라는 것을 알았습니다. 텍스트 내용을 드롭 다운 메뉴 아래에 놓으면 ‘ 내 텍스트를 옆으로 밀지 마십시오. 텍스트를 절대 위치로 변경하면 바닥 글이 그대로 유지되지 않았습니다. 나는 이것이 더 많은 사람들에게 문제라고 믿을 수 있기 때문에 여기에 추가합니다. 실제로 무슨 일이 일어 났는지, 나는 텍스트를 35ems 내 드롭 다운 아래에 넣습니다.

그런 다음, 나는 시각적으로 서로 바로 옆에, 상대적 위치와 상단을 표시합니다.

음수 값은 때때로 이러한 위치를 더 잘 이해할 때 매우 우수한 기능성으로 과소 평가됩니다.

당연히 고정 위치는 바닥 글의 논리처럼 보였지만 텍스트 또는 내용이 뷰 포트보다 길면 바닥 글이 뷰포트 아래로 내려 가기를 원합니다. 페이지에 내용이 거의 없으면 맨 아래에 머물러 있습니다.

이 설정은 매우 훌륭하게 수정되었으며보다 유동적이고 동적 인 페이지 레이아웃을 위해 ‘px’가 아닌 ’em’을 사용해야합니다! 🙂

(더 나은 솔루션이있을 수 있지만 이것은 장치뿐만 아니라 크로스 플랫폼에서도 효과적입니다).

답변