Cho phép thẻ cụ thể ghi đè tràn: ẩn

Question

Tôi có một số <div>, đó là một số height và width và overflow:hidden nhất định sao cho hình ảnh bên trong specfic bị cắt bớt; tuy nhiên tôi muốn một hình ảnh trong <div> để bật ra khỏi biên giới (tức là ghi đè lên số overflow:hidden), làm cách nào để thực hiện việc này?

Answer 1

Bạn không thể, trừ khi bạn thay đổi bố cục HTML và di chuyển hình ảnh đó ra khỏi div mẹ. Một chút ngữ cảnh sẽ giúp bạn tìm ra một giải pháp có thể chấp nhận được.

Answer 2

tràn đề cập đến vùng chứa không cho phép hiển thị nội dung quá khổ (khi được đặt thành ẩn). Nó không có gì để làm với các yếu tố bên trong có thể có tràn: bất cứ điều gì, và vẫn sẽ không được hiển thị.

Answer 3

Z-index không có vẻ để làm việc, nhưng ở đây tôi có một cách giải quyết mà làm việc tốt cho tôi, khi tôi cần thiết tràn chỉ là "nhìn thấy" khi lơ lửng một phần tử con:

#parent { 
    overflow: hidden; 
} 

#parent:hover { 
    overflow: visible; 
} 

Answer 4

Tôi biết điều này là một bài đăng cũ, nhưng điều này có thể được thực hiện (ít nhất là trong Chrome). Tôi đã tìm ra điều này khoảng hai năm trước và nó đã cứu tôi một vài lần.

Đặt trẻ có vị trí cố định và sử dụng lề thay vì trên cùng và trái để định vị nó.

#wrapper { 
    width: 5px; 
    height: 5px; 
    border: 1px solid #000; 
    overflow: hidden; 
} 

#parent { 
    position: relative; 
} 

button { 
    position: fixed; 
    margin: 10px 0px 0px 30px; 
} 

Dưới đây là một ví dụ: http://jsfiddle.net/senica/Cupmb/

Answer 5

Bạn có thể tràn một yếu tố ra khỏi lặn bằng cách gói nó trong div khác, sau đó thiết lập hình ảnh của bạn như position: absolute; và bù đắp nó bằng cách sử dụng lề.

<div class="no-overflow"> 
<div> 
<img class="escape" src="wherever.jpg" /> 
</div> 
</div> 

.no-overflow{ 
overflow:hidden; 
width: 500px 
height: 100px 
} 

.escape{ 
position: absolute; 
margin-bottom: -150px; 
} 

Ví dụ (thử nghiệm trong firefox + IE10) http://jsfiddle.net/Ps76J/

Answer 6

Tất cả các câu trả lời cho nơi không thỏa mãn cho tôi. Tất cả chúng đều bị tấn công theo ý kiến ​​của tôi và khó thực hiện trong các bố cục phức tạp.

Vì vậy, đây là một giải pháp đơn giản:

Khi cha mẹ có một lỗi tràn bộ nhất định, không có cách nào để cho con của nó ghi đè này.

Nếu trẻ cần ghi đè tràn phụ huynh, thì trẻ có thể bị tràn khác với các trẻ khác.

Vì vậy xác định tràn trên mỗi conthay vì tuyên bố nó trên mẹ:

<div class="panel"> 
    <div class="outer"> 
     <div class="inner" style="background-color: red;"> 
      <div> 
       title 
      </div> 

      <div>      
       some content 
      </div> 
     </div>  
    </div> 
</div> 

.outer { 
    position: relative; 
    overflow: hidden; 
}  

.outer:hover { 
    overflow: visible; 
} 

.inner:hover { 
    position: absolute; 
} 

Đây là một fiddle:

http://jsfiddle.net/ryojeg1b/1/

Answer 7

Bí quyết là giữ nguyên tố overflow:hidden w ith position:static và vị trí phần tử tràn liên quan đến cha mẹ cao hơn (chứ không phải là phụ huynh overflow:hidden).Cũng giống như vậy:

.relative-wrap { 
 
    /*relative on second parent*/ 
 
    position: relative; 
 
} 
 

 
.overflow-wrap { 
 
    height: 250px; 
 
    width: 250px; 
 
    overflow: hidden; 
 
    background: lightblue; 
 
    
 
    /*no relative on immediate parent*/ 
 
} 
 

 
.respect-overflow { 
 
    position: relative; 
 
    top: 75px; 
 
    left: 225px; 
 
    height: 50px; 
 
    width: 50px; 
 
    background: green;  
 
} 
 
.no-overflow { 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 225px; 
 
    height: 50px; 
 
    width: 50px; 
 
    background: red; 
 
}

<div class="relative-wrap"> 
 
    
 
    <div class="overflow-wrap"> 
 
     
 
     <div class="respect-overflow"> 
 
     
 
     </div> 
 
     <div class="no-overflow"> 
 
      
 
     </div> 
 
     
 
    </div> 
 
    
 
</div>

Tôi cũng muốn lưu ý, một trường hợp sử dụng rất phổ biến cho các mong muốn có một tràn yếu tố container của nó theo cách này là khi bạn muốn animate chiều cao của một dropdown hoặc vùng chứa từ X đến 0 và do đó cần phải có overflow: hidden trên vùng chứa. Thông thường, bạn có thứ gì đó bên trong vùng chứa mà bạn muốn tràn bất kể. Vì các phần tử này chỉ có thể truy cập được khi vùng chứa "mở", bạn có thể tận dụng và đặt tràn ngược trở lại visiblesau khi vùng chứa hoàn toàn mở và sau đó đặt lại thành hidden trước khi cố gắng tạo hoạt ảnh cho vùng chứa trở lại height: 0 .

Answer 8

Tất cả những điều trên là tốt đẹp nhưng không có gì đánh bại JAVASCRIPT. (Sử dụng jquery). Vì vậy,

<script> 
var element = $('#myID'); 
var pos = element.offset(); 
var height = element.height(); // optional 
element.appendTo($('body')); // optional 
element.css({ 
    position : 'fixed' 
}).offset(pos).height(height); 
</script> 

Những gì tôi là, có được vị trí ban đầu của phần tử (liên quan đến trang), tùy chọn có được chiều cao hoặc chiều rộng, tùy chọn thêm nguyên tố cho cơ thể, áp dụng các quy tắc css mới position : fixed và cuối cùng áp dụng vị trí ban đầu và chiều rộng và chiều cao tùy chọn.

Answer 9

Quấn bạn overflow: hiddendiv với một div rằng có một tài sản css của -

transform: translate(0, 0);

và trong thẻ specefic của bạn mà bạn muốn nó để ghi đè lên - overflow: hidden, thiết lập nó với -

position: fixed; nó sẽ tiếp tục có vị trí tương đối với bố mẹ

tức là -

.section { 
    ... 
    transform: translate(0, 0); 
} 

.not-hidden { 
    position: fixed; 
    ... 
} 

See the fiddle here

Answer 10

hiện Không có cách nào tôi biết để thực hiện một nút cha với tràn ẩn có con có thể nhìn thấy bên ngoài nó (với ngoại lệ của position:fixed trẻ em).

BAO GIỜ, có thể thay vì sử dụng tràn, bạn chỉ có thể sử dụng thuộc tính phác thảo được đặt thành màu nền được kết hợp với thuộc tính z-index để che dấu một số phần tử trong khi giữ lại các phần tử khác như vậy.

.persuado-overflow-hidden { 
 
/*gives the appearance of overflow:hidden*/ 
 
    z-index: -100; 
 
    position: relative; 
 
    outline: 1000vw solid white; 
 
    overflow: visible; 
 
} 
 
.overridevisible { 
 
/*takes the element out of the persuado overflow hidden*/ 
 
    z-index: 1; 
 
} 
 
/*does the other styling to the text*/ 
 
.loremcontainer { 
 
    width: 60vw; 
 
    height: 60vh; 
 
    margin: 20vw; 
 
    border: 1px solid; 
 
} 
 
.loremtxt { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    margin: -20vh; 
 
    z-index: -1; 
 
} 
 
.positionmessage { 
 
    z-index: 100; 
 
    position: absolute; 
 
    top: -12vh; 
 
    left: -5vw; 
 
    right: -5vw; 
 
    color: red; 
 
}

<div class="persuado-overflow-hidden loremcontainer"> 
 
<div class="loremtxt"> 
 
<div class="overridevisible positionmessage">Then, theres this text outside the paragraphs inside the persuado overflow:hidden element</div> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta lorem lorem, eu dapibus libero laoreet et. Fusce finibus, felis ac condimentum commodo, mauris felis dictum sapien, pellentesque tincidunt dui dolor id nulla. Etiam vulputate turpis eu lectus ornare, in condimentum purus feugiat. Donec ultricies lacinia urna, sit amet ultrices magna accumsan ut. Suspendisse potenti. Maecenas nisl nibh, accumsan vel sodales in, rutrum at sem. Suspendisse elit urna, luctus vitae urna ut, convallis ultricies tellus. Ut aliquet auctor neque, nec ullamcorper tortor ullamcorper vitae. Fusce at pharetra ante. Aliquam sollicitudin id ante sit amet sagittis. Suspendisse id neque quis nisi mattis vulputate. Donec sollicitudin pharetra tempus. Integer congue leo mi, et fermentum massa malesuada nec. 
 
</div> 
 
</div>

Answer 11

Tôi đã có một giải pháp siêu dễ dàng cho vấn đề này: Sử dụng "trước khi" tag. Tôi biết thẻ trước là tương đương với việc sử dụng "goto" trong lập trình, nhưng hey: nó hoạt động!

<div style="overflow: hidden;"> 
 
    <pre> 
 
    super long text which just goes on and on and on and on and one, etc. 
 
    </pre> 
 
</div>