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

http://jsbin.com/ibesa3

Đã hỏi ngày 6 tháng 3 năm 2011 lúc 9:58Mar 6, 2011 at 9:58

Jiew Mengjiew MengJiew Meng

82,8K176 Huy hiệu vàng476 Huy hiệu bạc789 Huy hiệu Đồng176 gold badges476 silver badges789 bronze badges

3

Hãy để tôi cung cấp câu trả lời cho cả hai câu hỏi có thể. Lưu ý rằng tiêu đề hiện tại của bạn (và bài đăng gốc) đặt một câu hỏi khác với những gì bạn tìm kiếm trong chỉnh sửa và nhận xét tiếp theo của bạn.

Để định vị một phần tử "đã cố định" tương đối với phần tử cha, bạn muốn

    ...
    Feedback

    ...
    Feedback

Ví dụ:

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

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

    ...
    Feedback

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

    ...
    Feedback

#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; }

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

    ...
    Feedback

#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; }

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

Ví dụ:

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

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

    ...
    Feedback

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

    ...
    Feedback

#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; }

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

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

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

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

7

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

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

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; }

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; }

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

8

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

12

Patrick McElhaneypatrick McElhaney

56.4K40 Huy hiệu vàng129 Huy hiệu bạc167 Huy hiệu đồng

Đầu tiên, đặt

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

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

nghi ngờNov 10, 2012 at 12:44

3

Huy hiệu vàng 16K846 Huy hiệu bạc54 Huy hiệu đồng

    
    .level1 {
        position: relative;
    }


    .level2 {
        position: absolute;
    }


    .level3 {
        position: fixed;
        /* Do not set top / left! */
    }

    

        

            

                Content
            
        
    

    

Đã trả lời ngày 10 tháng 11 năm 2012 lúc 12:44

Giải pháp này phù hợp với tôi! Tham khảo câu trả lời chi tiết ban đầu: https://stackoverflow.com/a/11833892/53856233 gold badges10 silver badges31 bronze badges

ATPNov 7, 2016 at 7:23

2

2.4193 huy hiệu vàng10 Huy hiệu bạc31 Huy hiệu đồng

Đã trả lời ngày 7 tháng 11 năm 2016 lúc 7:23

Tôi biết điều này là siêu cũ nhưng sau khi không tìm thấy câu trả lời (CSS thuần túy), tôi đang tìm kiếm tôi đã đưa ra giải pháp này (được trừu tượng hóa một phần từ Medium.com) và nghĩ rằng nó có thể giúp những người khác muốn làm điều tương tự.

  

    This element will be fixed
  

Nếu bạn kết hợp câu trả lời của @Duckmaestro, bạn có thể định vị một yếu tố cố định tương đối với cha mẹ (thực sự là ông bà). Sử dụng #yourDiv { position:fixed; bottom:40px; right:40px; } 2 để định vị một phần tử bên trong cha mẹ có #yourDiv { position:fixed; bottom:40px; right:40px; } 3 và sau đó #yourDiv { position:fixed; bottom:40px; right:40px; } 4 trên một phần tử bên trong phần tử được định vị tuyệt đối như vậy:

.relative {
  margin: 0 auto;
  position: relative;
  width: 300px;
}

.absolute {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

.fixed-feedback {
  position: fixed;
  top: 120px;
  width: 50px;
}

HTML

CSS

THÍ DỤ

Đã trả lời ngày 2 tháng 8 năm 2016 lúc 21:26Aug 2, 2016 at 21:26

LifehacklifehackLifehack

1.81314 huy hiệu bạc11 huy hiệu đồng14 silver badges11 bronze badges

3

Dưới đây là một ví dụ về gợi ý của Jon Adams ở trên để sửa một div (thanh công cụ) ở phía bên phải của phần tử trang của bạn bằng jQuery. Ý tưởng là tìm khoảng cách từ phía bên phải của chế độ xem sang phía bên phải của phần tử trang và giữ phía bên phải của thanh công cụ ở đó!

HTML

    ...
    Feedback

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

1

Đó 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ú

1. 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

2. 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

SabazsabazSabaz

4.2442 Huy hiệu vàng17 Huy hiệu bạc26 Huy hiệu đồng2 gold badges17 silver badges26 bronze badges

0

Tôi biết đây là một bài viết cũ hơn, nhưng tôi nghĩ rằng một ví dụ điển hình về những gì Jiew Meng đang cố gắng làm có thể được tìm thấy trên trang web này. Kiểm tra menu bên nằm ở đây: https://stackoverflow.com/faq#questions. Nhìn vào nó mà không đi vào nó quá sâu, tôi có thể nói JavaScript đính kèm một vị trí cố định khi cuộn vào bên dưới thẻ neo và xóa vị trí cố định nếu cuộn đi trên cùng một thẻ neo. Hy vọng rằng, điều đó sẽ khiến ai đó bắt đầu đi đúng hướng.

Đã trả lời ngày 19 tháng 12 năm 2012 lúc 20:37Dec 19, 2012 at 20:37

Illinoistimillinoistimillinoistim

45610 Huy hiệu bạc26 Huy hiệu Đồng10 silver badges26 bronze badges

0

Với nhiều div, tôi đã quản lý để có được một divs cố định và tuyệt đối-X. Trong trường hợp của tôi, tôi cần một div ở bên trái và bên phải, được căn chỉnh với một div chiều rộng 1180px ở giữa.

    ...
    Feedback

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