1. Trang chủ
  2. Câu hỏi và trả lời
  3. Floating div yếu tố

Floating div yếu tố

2010-05-28 39 views

Trả lời

8

position: absolute với đủ z-index cao:

#element { 
    position: absolute; 
    top: 50px; 
    left: 200px; 
    z-index: 10; 
}

Nguồn

2010-05-28 12:51:39

0

bạn phải làm điều đó sử dụng định vị và chỉ mục z;

Nguồn

2010-05-28 12:50:51 Salil

1

Yup, bạn cần CSS của bạn để tìm một cái gì đó như thế này

.floating-div { 
    position: absolute; 
    left: 40px; 
    top: 40px; 
    z-index: 100000; 
}

Nguồn

2010-05-28 12:53:27

+0

hehe, Hivemind! –

+0

Nếu bạn đang sử dụng chỉ mục z thực sự cao như vậy, có thể bạn không sử dụng chúng đúng cách. Thông thường mọi người sử dụng chúng như một cách để nói 'thực sự, thực sự, đặt cái này lên đỉnh', nhưng sau đó điều gì xảy ra nếu một phần tử khác có 100001? Xem 'câu trả lời' của tôi cho các ví dụ mã về cách tốt hơn để quản lý chỉ mục z. – Beejamin

+0

Tôi đồng ý hoàn toàn, tôi chỉ cần gõ 'lớn' để được rõ ràng rõ ràng là tầm quan trọng của số lượng cao hơn. –

4

Đây là một theo dõi câu trả lời Tatu, mà sẽ làm việc, nhưng sử dụng chỉ mục z theo cách vụng về, nhưng rất phổ biến.

Z-index xác định thứ tự sắp xếp của các phần tử vị trí, liên quan đến các phần tử được định vị khác. Thứ tự xếp chồng cũng liên quan đến thứ tự xếp chồng của các phần tử gốc. Vì vậy:

Khi bạn có hai yếu tố anh chị em trong một trang:

<body> 
    <div style="position:absolute;z-index:2"></div><!-- Position 2 (top) --> 
    <div style="position:absolute;z-index:1"></div><!-- Position 1 (bottom) --> 
</body>

Những đều xếp chồng lên nhau theo cha mẹ của họ - các body, mà là ở mặc định của nó 'đáy' của ngăn xếp.

Bây giờ, khi những yếu tố có con với z-chỉ, vị trí của họ trong ngăn xếp được xác định liên quan đến cha mẹ các mục:

<body> 
    <div style="position:absolute;z-index:2"><!-- Position 2 (top) --> 
     <div style="position:absolute;z-index:2"></div><!-- Position 2.2 --> 
     <div style="position:absolute;z-index:1"></div><!-- Position 2.1 --> 
    </div> 
    <div style="position:absolute;z-index:1"><!-- Position 1 (bottom) --> 
     <div style="position:absolute;z-index:2"></div><!-- Position 1.2 --> 
     <div style="position:absolute;z-index:1"></div><!-- Position 1.1 --> 
    </div> 
</body>

tôi thấy hữu ích khi nghĩ về những đứa trẻ như có một ' điểm 'z-index - vì vậy phần tử con của một phần tử có z-index:1 có chỉ số z là 1.x. Bằng cách này, bạn có thể thấy rằng, ngay cả khi tôi cho div này một chỉ mục z 100000, nó sẽ không bao giờ xuất hiện trên đầu trang của một phần tử với chỉ mục z cha của 2. 2.x luôn xuất hiện trên đầu trang của 1. x

này rất hữu ích khi bạn đang làm 'nổi' những thứ như lớp phủ, sau đó ghi chú, vv một thiết lập như thế này là một khởi đầu tốt:

<body> 
    <div id="contentContainer" style="position:relative;z-index:1"> 
     All your 'page level content goes here. You can use all the z-indexes you like. 
    </div> 
    <div id="overlayContainer" style="position:relative;z-index:2"> 
     Anything to float 'on top of the page' goes here. Nothing inside 'contentContainer' can ever appear on top of it. 
    </div> 
</body>

Bất cứ điều gì bạn muốn nổi trên mặt đầu vào 'overlayContainer' - các chỉ mục z cơ sở giữ riêng hai 'lớp' và bạn có thể tránh sử dụng các chỉ mục z gây nhầm lẫn cao như 999999 hoặc 100000.

Nguồn

2010-05-28 14:11:33 Beejamin

+0

+ 1- câu trả lời đẹp và đơn giản – beldaz

+0

Cảm ơn bạn rất nhiều! – Beejamin

Các vấn đề liên quan

 Các vấn đề liên quan