CSS는 페이지의 HTML 요소 순서를 실제로 재정의 할 수 있습니까?

Question

페이지에 여러 개의 div가있는 경우 CSS를 사용하여 크기를 조절하고 떠 다니며 약간 움직일 수 있지만 처음에는 div이 표시 될 수있는 방법을 볼 수 없습니다. 페이지 상단과 마지막으로 div이 맨 아래에 표시됩니다. 소스 HTML에서 온 요소의 순서를 완전히 재정의 할 수는 없습니까?

사람들이 "하나의 CSS 파일을 편집하여 전체 웹 사이트의 모양을 바꿀 수 있습니다."라고 말하기 때문에 나는 뭔가를 놓쳐 야합니다.하지만 여전히 동일한 순서로 div을 원할 것입니다.

은 (추신 : 나는 아무도 페이지에있는 모든 요소에 position:absolute를 사용하지 않습니다 확신합니다.)

Answer 1

플로팅을 사용하면 위치 절대 값을 사용하여 꽤 좋은 위치 지정 마법을 끌어 페이지 순서 중 일부를 변경할 수 있습니다.

예를 들어, StackOverflow를 사용하면 마크 업을 올바르게 설정 한 경우 제목과 본문 내용이 마크 업에서 처음 두 항목이되고 탐색/검색 및 마지막으로 오른쪽 사이드 바가 될 수 있습니다. 이것은 네비게이션을 담을만큼 위쪽 여백이 크고 사이드 바를 잡을만큼 큰 오른쪽 여백을 가진 내용 컨테이너를 가짐으로써 수행됩니다. 그럼 둘 다 절대적으로 자리에 배치 될 수 있습니다.

<h1> Stack Overflow </h1> 
<div id="content"> 
    <h2> Can Css truly blah blah? </h2> 
    ... 
</div> 
<div id="nav"> 
    <ul class="main"><li>quiestions</li> ... </ul> 
    .... 
</div> 
<div id="side"> 
    <div class="box"> 
    <h3> Sponsored By </h3> 
    <h4> Lew Zelands fish market </h4> 
    .... 
    </div> 
</div> 

그리고 여기서 중요한 것은 마크 업을 염두에 마법의 위치를 ​​이런 종류의 수행한다는 것이다

h1 { position: absolute; top: 0; left: 0; } 
#content { margin-top: 100px; margin-right: 250px; } 
#nav { position: absolute; top: 0; left: 300px; } 
#side { position: absolute; right: 0; top: 100px; } 

같은 CSS : 마크 업처럼 보일 수 있습니다.

네비게이션 바가 왼쪽에 있고 네비게이션 아래의 사이드 바가 너무 힘들어 지도록 항목을 변경하십시오.

Answer 2

당신은 위치 필요가 없습니다 당신이 원하는 일을하는 모든 요소에 절대.

몇 가지 주요 항목에서 사용하고 섹션의 루트 요소와 함께 그 안에 포함 된 모든 항목을 이동하여 원하는 위치에 배치 할 수 있습니다.

Answer 3

CSS는 요소를 정상적인 흐름에서 가져 와서 원하는 방식으로 원하는 위치에 배치 할 수 있습니다. 그러나 그것은 새로운 흐름을 만들 수 없습니다.

이렇게하면 페이지/창 위쪽/맨 위의 html 문서의 마지막 항목을 배치 할 수 있고 페이지/창 맨 아래/맨 아래의 html 문서에서 첫 번째 항목을 배치 할 수 있습니다. 창문. 하지만 이렇게하면이 항목들을 서로 상대적으로 배치 할 수 없습니다. 당신은 html 문서의 첫 번째 항목이 페이지의 끝까지 얼마나 멀리 떨어져 있는지 정확하게 알아야합니다. 해당 내용이 동적 인 경우 (즉, 데이터베이스 또는 CMS에서), 이것은 사소한 것과는 거리가 멀습니다.

Answer 4

원하는 작업을 수행하는 훌륭한 예를 보려면 CSS Zen Garden을 참조하십시오. 오른쪽의 링크를 통해 다양한 샘플 레이아웃을 사용하여 CSS를 사용하여 모든 것을 움직이는 다양한 방법을 확인하십시오.

Answer 5

가장 중요한 요소는 의미 상 의미있는 방식으로 html 요소를 배치하는 것입니다. 그리고 운이 좋으면 CSS 레이아웃을 너무 많이 할 필요가 없습니다. 예를 들어 사이트의 머리글은 페이지의 첫 번째 요소 일 것이고 공통 탐색, 하위 탐색, 내용 및 바닥 글 (불완전 목록)이 뒤 따릅니다.

아마도 레이아웃을 90 ~ 95 % 정도 차지하는 것은 아마 마크 업을 조작하는 데 비교적 사소한 것이어야합니다. 다른 5 ~ 10 %는 조금 더 노력하면서도 가능할 것입니다.하지만 스스로 물어야하는 질문은 "페이지의 오른쪽 하단에 사이트 헤더를 얼마나 자주 배치 할 수 있습니까?"입니다.

필자는 적어도 지상 레이아웃 코드와 비교하여 룩앤필을 크게 바꾸고 싶다면 사실 사이트를 조작하기가 너무 힘들지 않다는 것을 항상 발견했습니다.

</2C >

헤더는 항상 마지막에, 제 1 및 바닥 글 것에 대해

Answer 6

좋은 점! 하지만 내 광고 DIV를 오른쪽에서 오른쪽으로 이동하고 싶을 수도 있습니다.

내가 들었던 또 다른 사항은 콘텐츠 DIV를 먼저 넣는 것이므로 Google이 더 많은 관심을 (더 높은 페이지 상단에있는 관련 키워드) 지불합니다 ... 아니면 그 신화입니까?그렇게하면 내가 묻는 CSS 트릭을 요구할 것이다.

Answer 7

position : absolute를 사용하여 소스 순서와 별도로 개별 상자를 완전히 배치 할 수 있습니다. 따라서 CSS를 사용하여 헤더를 페이지 하단으로 이동하고 바닥 글을 상단으로 이동할 수 있습니다.

그러나 이것은 접근하기 쉽기 때문에 일반적으로 좋지 않습니다. 소스에있는 내용의 순서는 독자에게 제시 할 순서와 다소 차이가 있어야합니다. 그 이유는 화면 판독기 나 유사한 장치가 CSS에서 정의한 시각적 순서가 아닌 소스에 정의 된 순서대로 내용을 제공하기 때문입니다.

Answer 8

오늘 몇 가지 방법이 있습니다. 첫 번째는 더 많은 브라우저에서 작동하지만 더 제한됩니다

1. CSS 독점적으로 제어 최대 세 가지 요소의 수직 정렬을 허용 table-caption, table-row 및 table-cell의 CSS 표시 값을 사용.

2. 이것은 최근의 모든 최신 브라우저에서만 작동합니다 (예, IE9에서는 실패합니다). flexbox CSS 속성 사용.

"this is responsive"패턴 페이지에서 실제 예제를보고 이러한 기법에 대해 자세히 볼 수 있습니다. 내가 말하는 두 부분은 "소스 - 주문 이동"부분에 있습니다.