Tại sao lề của tôi không hoạt động với vị trí: cố định?

Question

JSFiddle Demo

Tôi có div cho tiêu đề và div cho phần nội dung.

Vì một lý do nào đó, tôi không thể có lề ở dưới cùng của tiêu đề buộc nội dung bị quấn để đẩy xuống. Nó chỉ bỏ qua nó hoàn toàn và tôi không biết tại sao.

Có ai biết điều gì đang xảy ra với điều này không? Nó không làm điều này khi tôi lấy đi vị trí: cố định; thuộc tính trên tiêu đề, nhưng tôi muốn nó được cố định ở trên cùng để khi cuộn tiêu đề luôn ở chế độ xem.

Hy vọng ai đó có thể giải thích lý do tại sao điều này xảy ra hoặc ít nhất nó được gọi là gì để tôi có thể google.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
\t font-family: arial; 
 
\t background: #5A9910; 
 
\t text-align: center; 
 
} 
 

 
/* ==========================Main wrap for page==*/ 
 
div.wrap { 
 
\t width: 100%; 
 
\t margin: 0 auto; 
 
\t text-align: left; 
 
} 
 

 
/* ==========================Header with logo==*/ 
 
div.header { 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t background: #ffffff; 
 
\t -webkit-box-shadow: 0 8px 6px -6px #333; 
 
\t -moz-box-shadow: 0 8px 6px -6px #333; 
 
\t box-shadow: 0 8px 6px -6px #333; 
 
} 
 

 
/* ==========================Header logo image==*/ 
 
img.headerlogo { 
 
\t width: 30%; 
 
} 
 

 
/* ==========================Content wrapper==*/ 
 
div.contentwrap { 
 
\t width: 80%; 
 
\t height: 1600px; 
 
\t background: #ccc; 
 
\t margin: 0 auto; 
 
}

<div class="wrap"> 
 
    <div class="header"> 
 
     <p>Header</p> 
 
    </div> 
 
    <div class="contentwrap"> 
 
     <p>Test</p> 
 
    </div> 
 
</div>

Answer 1

tôi nghĩ bạn phải khai báo rõ ràng vị trí của div cố định.

div.header { 
position: fixed; 
width: 100%; 
background: #ffffff; 
top:20px; 
-webkit-box-shadow: 0 8px 6px -6px #333; 
-moz-box-shadow: 0 8px 6px -6px #333; 
box-shadow: 0 8px 6px -6px #333; 
} 

và gán lề tại div nội dung

div.contentwrap { 
width: 80%; 
height: 1600px; 
background: #ccc; 
margin: 80px auto; 
} 

séc fiddle này nếu công trình như bạn cần: https://jsfiddle.net/0cmvg92m/3/

Answer 2

Margin không hoạt động bởi vì vị trí của tiêu đề là cố định.

Bạn phải sử dụng padding-top trên contentwrap của bạn.

Answer 3

Tiêu đề của bạn có thuộc tính position:fixed. Do đó, lợi nhuận mà bạn áp dụng cho tiêu đề không ảnh hưởng đến phần nội dung.

Để giải quyết vấn đề này, bạn cần phải cung cấp cho một trong hai margin hoặc padding đến contentwrap yếu tố

Answer 4

Khi bạn thiết lập một yếu tố để position: fixed;, bạn loại bỏ nó từ "dòng chảy tài liệu bình thường". Hãy tưởng tượng trang web của bạn là một con sông và bạn đang nhìn xuống từ trên cao. Mỗi phần tử là một tảng đá trên con sông đó. Bất kỳ margin bạn đã áp dụng cho các yếu tố của bạn giống như một trường lực xung quanh một trong những tảng đá đó.

Khi bạn đặt position: fixed; trên một trong những loại đá đó, bạn chủ yếu kéo nó lên khỏi sông để tảng đá, về bản chất, đang trôi nổi trên sông ở giữa không trung. Tảng đá và dòng nước của dòng sông vẫn trông giống như bạn, bởi vì bạn đang ở trên nhìn thẳng xuống, nhưng tảng đá không còn tương tác với dòng chảy của dòng sông nữa.

Nếu bạn đã áp dụng margin cho tảng đá đó, trường lực xung quanh tảng đá không còn giữ nước cách xa nữa, bởi vì tảng đá lơ lửng trên không trung nhờ thuộc tính position: fixed; của nó. Vì vậy, không có nước hoặc đá khác (các yếu tố khác) mà từ đó nó cần phải khoảng cách chính nó. Lĩnh vực lực lượng đá của bạn (lề của phần tử của bạn) đang đẩy vào không khí mỏng, vì vậy không có gì trong dòng sông sẽ bị ảnh hưởng.

Tuy nhiên, một bức tranh trị giá một ngàn chữ, như là nói đi:

Người đàn ông này là không thực sự đá trên tháp nghiêng Pisa, nhưng nó chắc chắn trông giống như nó! Trong ví dụ này, nền của bức ảnh, bao gồm Tháp Nghiêng Pisa, là trang của bạn (hoặc 'luồng tài liệu bình thường') của bạn, và người đàn ông là một phần tử (hoặc đá từ ví dụ cuối cùng của chúng tôi) với áp dụng position: fixed;.

Đọc thêm về thuộc tính vị trí here và, cập nhật hơn, here.

Một cách để khắc phục điều này là đặt tiêu đề của bạn thành top: 20px; z-index: 2; để đảm bảo nó được đặt ở trên cùng và phía trên mọi phần tử khác trên mặt phẳng z, sau đó cung cấp cho cơ thể position: relative; và margin-top bằng với chiều cao của tiêu đề (trong trường hợp này là 52px) cộng với giá trị của thuộc tính top của tiêu đề. Để tăng khoảng cách giữa tiêu đề và nội dung của bạn, chỉ cần tăng số tiền margin-top. Điều này đôi khi được gọi là cách tiếp cận "đầu trang/chân trang". Dưới đây là một bản demo:

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: arial; 
 
    background: #5A9910; 
 
    text-align: center; 
 
} 
 

 
/* ==========================Main wrap for page==*/ 
 
div.wrap { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    text-align: left; 
 
} 
 

 
/* ==========================Header with logo==*/ 
 
div.header { 
 
    position: fixed; 
 
    top: 20px; 
 
    z-index: 2; 
 
    width: 100%; 
 
    background: #ffffff; 
 
    -webkit-box-shadow: 0 8px 6px -6px #333; 
 
    -moz-box-shadow: 0 8px 6px -6px #333; 
 
    box-shadow: 0 8px 6px -6px #333; 
 
} 
 

 
/* ==========================Header logo image==*/ 
 
img.headerlogo { 
 
    width: 30%; 
 
} 
 

 
/* ==========================Content wrapper==*/ 
 
div.contentwrap { 
 
    width: 80%; 
 
    height: 1600px; 
 
    background: #ccc; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    margin-top: 72px; 
 
}

<div class="wrap"> 
 
    <div class="header"> 
 
     <p>Header</p> 
 
    </div> 
 
    <div class="contentwrap"> 
 
     <p>Test</p> 
 
    </div> 
 
</div>

T.B. position: fixed; là thuộc tính CSS (cặp thuộc tính-giá trị, chính xác), không phải thuộc tính HTML.