cha mẹ & con với vị trí cố định, tràn phụ huynh: lỗi ẩn

Question

Tôi không biết nếu có vấn đề, nhưng tôi đã tự hỏi tại sao các overflow:hidden không hoạt động trên fixed phần tử cha/con.

Dưới đây là một ví dụ:

CSS và HTML:

.parent{ 
 
    position:fixed; 
 
    overflow:hidden; 
 
    width:300px; 
 
    height:300px; 
 
    background:#555; 
 
} 
 
.children{ 
 
    position:fixed; 
 
    top:200px; 
 
    left:200px; 
 
    width:150px; 
 
    height:150px; 
 
    background:#333; 
 
}

<div class="parent"> 
 
    <div class="children"> 
 
    </div> 
 
</div>

Live Demo: jsFiddle

Answer 1

Bởi vì một yếu tố vị trí cố định là cố định với r không quan tâm đến chế độ xem, không phải phần tử khác. Vì vậy, vì khung nhìn không cắt nó, tràn sẽ trở nên không liên quan.

Trong khi vị trí và kích thước của một phần tử với position: absolute có liên quan đến khối chứa của nó, vị trí và kích thước của một phần tử với position: fixed luôn tương đối vào khối ban đầu chứa. Đây thường là chế độ xem: cửa sổ trình duyệt hoặc hộp trang của giấy.

ref: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

Answer 2

yếu tố vị trí cố định được vị trí tương đối so với cửa sổ trình duyệt, do đó yếu tố phụ huynh về cơ bản là không thích hợp.

Để có được hiệu quả mong muốn, nơi overflow trên clip cha mẹ đứa trẻ, sử dụng position: absolute thay vì: http://jsfiddle.net/DBHUv/1/

Answer 3

Tôi đã có một, vấn đề khá phức tạp tương tự với một bố cục linh hoạt nơi cột bên phải có một cố định chiều rộng và bên trái có chiều rộng linh hoạt. Vùng chứa cố định của tôi phải có cùng chiều rộng với cột linh hoạt. Đây là giải pháp của tôi:

HTML

<div id="wrapper"> 
    <div id="col1"> 
    <div id="fixed-outer"> 
     <div id="fixed-inner">inner</div> 
    </div> 
    COL1<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    <div id="col2">COL2</div> 
</div> 

CSS

#wrapper { 
    padding-left: 20px; 
} 

#col1 { 
    background-color: grey; 
    float: left; 
    margin-right: -200px; /* #col2 width */ 
    width: 100%; 
} 

#col2 { 
    background-color: #ddd; 
    float: left; 
    height: 400px; 
    width: 200px; 
} 

#fixed-outer { 
    background: yellow; 
    border-right: 2px solid red; 
    height: 30px; 
    margin-left: -420px; /* 2x #col2 width + #wrapper padding-left */ 
    overflow: hidden; 
    padding-right: 200px; /* #col2 width */ 
    position: fixed; 
    width: 100%; 
} 

#fixed-inner { 
    background: orange; 
    border-left: 2px solid blue; 
    border-top: 2px solid blue; 
    height: 30px; 
    margin-left: 420px; /* 2x #col2 width + #wrapper padding-left */ 
    position: absolute; 
    width: 100%; 
} 

Live Demo: http://jsfiddle.net/hWCub/

Answer 4

Bạn có thể xem xét sử dụng CSS clip: rect(top, right, bottom, left); clip một Posi cố định phần tử đã được gán cho phụ huynh. Xem bản trình diễn tại http://jsfiddle.net/lmeurs/jf3t0fmf/.

Cẩn thận, sử dụng cẩn thận!

Mặc dù phong cách clip được hỗ trợ rộng rãi, nhược điểm chính là rằng:

1. vị trí của cha mẹ không thể là tĩnh hoặc tương đối (có thể sử dụng một phụ huynh hoàn toàn vị trí bên trong một container tương đối vị trí);
2. Tọa độ chính xác không hỗ trợ tỷ lệ phần trăm, mặc dù giá trị auto bằng 100%, tức là. clip: rect(auto, auto, auto, auto);;
3. Khả năng có yếu tố con bị giới hạn trong ít nhất là IE11 & Chrome34, ví dụ: chúng ta không thể thiết lập vị trí của các phần tử con thành tương đối hoặc tuyệt đối hoặc sử dụng biến đổi CSS3 như tỷ lệ.

Xem http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ để biết thêm thông tin.

EDIT: Chrome dường như để xử lý vị trí của CSS3 và biến đổi về yếu tố con tốt hơn rất nhiều khi áp dụng backface-visibility, vì vậy chỉ để đảm bảo chúng tôi đã thêm:

-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden; 

đến yếu tố con chính.

Cũng lưu ý rằng nó không được hỗ trợ đầy đủ bởi các trình duyệt cũ/di động hoặc có thể mất thêm một chút công sức. Xem triển khai của chúng tôi cho menu tại bellafuchsia.com.

1. IE8 hiển thị menu tốt nhưng các liên kết menu không thể nhấp được;
2. IE9 không hiển thị menu dưới màn hình đầu tiên;
3. iOS Safari < 5 không hiển thị trình đơn tốt;
4. iOS Safari 5+ sơn lại nội dung được cắt bớt khi cuộn sau khi cuộn;
5. FF (ít nhất 13+), IE10 +, Chrome và Chrome dành cho Android dường như chơi đẹp.

EDIT 2014-11-02: URL trình diễn đã được cập nhật.

Answer 5

2016 update:

Bạn có thể tạo ra một bối cảnh xếp chồng mới, như đã thấy trên Coderwall:

<div style="transform: translate3d(0,0,0);overflow:hidden"> 
    <img style="position:fixed; ..." /> 
</div> 

nào đề cập đến http://dev.w3.org/csswg/css-transforms/#transform-rendering

Đối với các yếu tố mà bố trí được quản lý bởi mô hình hộp CSS, bất kỳ giá trị nào khác ngoài giá trị không cho kết quả biến đổi trong việc tạo ra cả ngữ cảnh xếp chồng và một blo chứa ck. Đối tượng hoạt động như một khối chứa cho các hậu duệ được định vị cố định.

Answer 6

Nếu bạn muốn ẩn tràn trên các yếu tố vị trí cố định, cách tiếp cận đơn giản nhất tôi đã tìm thấy là để đặt các yếu tố bên trong một yếu tố container, và áp dụng position:fixed và overflow:hidden vào đó yếu tố thay vì các yếu tố chứa (bạn phải xóa position:fixed khỏi phần tử được chứa để làm việc này). Nội dung của container cố định sau đó sẽ được cắt bớt như mong đợi.

Trong trường hợp của tôi, tôi gặp sự cố khi sử dụng object-fit:cover trên một phần tử vị trí cố định (nó tràn ra ngoài giới hạn của nội dung trang, bất kể overflow:hidden). Đặt nó bên trong một thùng chứa cố định với overflow:hidden trên thùng chứa đã khắc phục sự cố.