Hướng dẫn css fixed to parent - css đã được sửa thành cha mẹ

359

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi thấy rằng khi tôi định vị một phần tử cố định, không quan trọng nếu cha mẹ có định vị tương đối hay không, nó sẽ định vị cố định, so với cửa sổ?

#wrapper {
  width: 300px;
  background: orange;
  margin: 0 auto;
  position: relative;
}

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}


    ...
    Feedback

//jsbin.com/ibesa3

Feedback

7 trên phần tử con và bất kỳ chế độ vị trí nào khác ngoài mặc định hoặc tĩnh trên phần tử cha của bạn., you want


    ...
    Feedback

7 on the child element, and any position mode other than the default or static on your parent element.

Ví dụ:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

Điều này sẽ định vị


    ...
    Feedback

8 phần tử 50 pixel còn lại và 20 pixel xuống so với vị trí của ParentDiv.

Để định vị một phần tử "đã cố định" so với cửa sổ, bạn muốn


    ...
    Feedback

9 và có thể sử dụng
#parentDiv { position:relative; } #childDiv { position:absolute; left:50px; top:20px; }
0,
#parentDiv { position:relative; } #childDiv { position:absolute; left:50px; top:20px; }
1,
#parentDiv { position:relative; } #childDiv { position:absolute; left:50px; top:20px; }
2 và
#parentDiv { position:relative; } #childDiv { position:absolute; left:50px; top:20px; }
3 để định vị khi bạn thấy phù hợp., you want


    ...
    Feedback

9, and can use

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

2, and

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

3 to position as you see fit.

Ví dụ:

#yourDiv { position:fixed; bottom:40px; right:40px; }

Điều này sẽ định vị


    ...
    Feedback

8 phần tử 50 pixel còn lại và 20 pixel xuống so với vị trí của ParentDiv.

Feedback 9 và có thể sử dụng

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

2 và

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

3 để định vị khi bạn thấy phù hợp.

Điều này sẽ định vị

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

4 đã cố định tương đối với cửa sổ trình duyệt web, 40 pixel từ cạnh dưới và 40 pixel từ cạnh phải.59 gold badges74 silver badges93 bronze badges

TylerhMar 6, 2011 at 10:01

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồngDuckMaestro

Đã trả lời ngày 6 tháng 3 năm 2011 lúc 10:0111 gold badges66 silver badges84 bronze badges

DuckMaestroduckMaestro

14.6K11 Huy hiệu vàng66 Huy hiệu bạc84 Huy hiệu đồng

Thông số kỹ thuật CSS yêu cầu


    ...
    Feedback

9 được neo vào chế độ xem, không phải là phần tử có vị trí.: Some browsers have

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

6 CSS support which limits an element to be positioned within both its container and the viewport. Per the commit message:

Nếu bạn phải chỉ định tọa độ của mình liên quan đến cha mẹ, bạn sẽ phải sử dụng JavaScript để tìm vị trí của cha mẹ liên quan đến chế độ xem trước, sau đó đặt vị trí của con cái [đã sửa].
Thay thế: Một số trình duyệt có hỗ trợ
#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }
6 CSS giới hạn một phần tử được định vị trong cả thùng chứa và chế độ xem của nó. Mỗi tin nhắn cam kết:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

6 ... hạn chế một phần tử được định vị bên trong giao điểm của hộp container và chế độ xem.

Một phần tử được định vị gắn bó hoạt động giống như vị trí: tương đối [không gian được dành riêng cho nó trong dòng], nhưng với độ lệch được xác định bởi vị trí dính. Đã thay đổi isinflowPocations [] để bao gồm tương đối và dính.

Tùy thuộc vào mục tiêu thiết kế của bạn, hành vi này có thể hữu ích trong một số trường hợp. Nó hiện là một bản nháp làm việc, và có sự hỗ trợ tốt, ngoài các yếu tố bảng.

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

8 Vẫn cần tiền tố

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

9 trong Safari.Oct 19, 2011 at 14:46

Xem Caniuse để biết số liệu thống kê cập nhật về hỗ trợ trình duyệt.

Đã trả lời ngày 19 tháng 10 năm 2011 lúc 14:46

Cập nhật năm 2016

Bây giờ có thể trong các trình duyệt hiện đại để định vị một yếu tố cố định so với thùng chứa của nó. Một yếu tố có một thuộc tính biến đổi hoạt động như một chế độ xem cho bất kỳ phần tử con nào cố định của nó.

.context {
  width: 300px;
  height: 250px;
  margin: 100px;
  transform: translateZ[0];
}
.viewport {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  overflow: scroll;
}
.centered {
  position: fixed;
  left: 50%;
  bottom: 15px;
  transform: translateX[-50%];
}


  
    

      
        
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
        
        
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
        

        
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
        

        
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
          stuff
        
      

      OK

Hoặc khi CSS biến đổi mô -đun đặt nó:Aug 5, 2016 at 19:19

Đối với các phần tử có bố cục được điều chỉnh bởi mô hình hộp CSS, bất kỳ giá trị nào khác ngoài không có thuộc tính biến đổi cũng khiến phần tử thiết lập một khối chứa cho tất cả hậu duệ. Hộp đệm của nó sẽ được sử dụng để bố trí cho tất cả các hậu duệ vị trí tuyệt đối của nó, hậu duệ vị trí cố định và các tệp đính kèm nền cố định hậu duệ.Patrick McElhaney

Đã trả lời ngày 5 tháng 8 năm 2016 lúc 19:1940 gold badges129 silver badges167 bronze badges

Patrick McElhaneypatrick McElhaney

Feedback 0

CSS


    ...
    Feedback

jQuery


    ...
    Feedback

Jon Adams

23.9K18 Huy hiệu vàng83 Huy hiệu bạc118 Huy hiệu đồng18 gold badges83 silver badges118 bronze badges

Đã trả lời ngày 22 tháng 10 năm 2012 lúc 1:21Oct 22, 2012 at 1:21

KXLKXLKXL

3453 Huy hiệu bạc6 Huy hiệu Đồng3 silver badges6 bronze badges

Đó là một bài viết cũ nhưng tôi sẽ rời khỏi đây giải pháp JavaScript của tôi chỉ trong trường hợp ai đó cần nó.


    ...
    Feedback


    ...
    Feedback


    ...
    Feedback

Ghi chú

Tôi đã sử dụng Transform: Dịch [@px] vì nó nên nhẹ để tính toán, thực hiện hiệu suất cao
Tôi chỉ thử chức năng này với các trình duyệt hiện đại, nó sẽ không hoạt động cho các trình duyệt cũ nơi các nhà cung cấp được yêu cầu [và tất nhiên là tức là]

Đã trả lời ngày 25 tháng 9 năm 2015 lúc 9:17Sep 25, 2015 at 9:17

Feedback 6

Đã trả lời ngày 28 tháng 9 năm 2014 lúc 15:48Sep 28, 2014 at 15:48

Xem Caniuse để biết số liệu thống kê cập nhật về hỗ trợ trình duyệt.

CSS

jQuery

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề