How to trim a fixed element inside another container?

Question

There is a block with overflow: hidden . Inside of which there must be an element with position: fixed , since you need it to stick to the "window" of the page, but at the same time it does not go beyond the parent. How is this possible to do?

Example : now is absolute , because the image does not go beyond, and can not stretch. It needs to be stretched to the full page. Background-position not something, an image as an example, there could be anything.

Thank.

UPDATE : clip-path: inset(0) parent works fine!

 wrapper { position: relative; min-height: 1000px; width: 100%; } .container { position: relative; overflow: hidden; border: 1px solid #000; height: 250px; width: 500px; float: right; -webkit-clip-path: inset(0); clip-path: inset(0); } .inner { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }

 <div class="wrapper"> <div class="container"> <div class="inner"> <img src="http://lukedowding.com/wp-content/uploads/BR2049-Wallpaper-Dam.png?x86078" alt=""> </div> </div> </div>

@ nosferatu-id No, I need left: 0, right: 0, top: 0. Just that I wouldn’t crawl for the parent.
@nosferatu-id, it only "centers" the content, I need something completely different.

Inquisitor Inquisitor 1,551 1 golden mark 2 silver marks 11 bronze marks · Accepted Answer · 2019-03-15T16:53:17

Trim element with position:fixed parent will not work. But you can cut this item using the clip-path .

Inquisitor

1,551 1 golden mark 2 silver marks 11 bronze marks

Do not tell me how to do this? I can not understand. - Predaytor
one
Please supplement your answer with an example of using this property - mymedia
It is not the answer to the question. To leave your comments or ask the author to clarify, leave a comment to the appropriate post. - from the queue of checks - mymedia
@mymedia, it seems. - Qwertiy ♦
@ Inquisitor example can show with a picture? A link to a resource for example. - Vladimir Rodichev

|

Answer 2 · 2019-03-16T23:31:11

If you just cut, there is another method: clip-path. See this example. Which position should you specify yourself.

Each method has both advantages and disadvantages. IMHO the best method, what I sent earlier Adaptive, close to your image. It is more beautiful, aesthetic, and respects the geometry, unusual. For the rest, you explain poorly. Don't give a damn.

 .inner { position: fixed; top: 0; left: 0; right: 0; bottom: 0; clip: rect(400px, 1300px, 650px, 800px); }

 <div class="wrapper"> <div class="container"> <div class="inner"> <img src="http://lukedowding.com/wp-content/uploads/BR2049-Wallpaper-Dam.png?x86078" alt=""> </div> </div> </div>

Vladimir Rodichev Vladimir Rodichev 614 13 bronze marks · Answer 3 · 2019-03-16T07:56:41

 .wrapper { position: relative; min-height: 1000px; width: 100%; } .container { overflow: hidden; border: 1px solid #000; height: 250px; width: 500px; position: fixed; right: 8px; top: 8px; }

 <div class="wrapper"> <div class="container"> <div class="inner"> <img src="http://lukedowding.com/wp-content/uploads/BR2049-Wallpaper-Dam.png?x86078" alt=""> </div> </div> </div>

So do you want?

Here is an example, what is outside the border should be hidden, but the image (maybe any block) is stretched along the edges of the page.
I did something like this with a fixed heder, absolute will work there, no way here.

Vladimir Rodichev Vladimir Rodichev 614 13 bronze marks · Answer 4 · 2019-03-16T11:46:33

I made you this decision. Hold on!

 .m { position: fixed; left: 0; top: 0; right: 0; bottom: 0; } m. img { object-fit: cover; width: 100%; height: 100%; } .c { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; /* background: yellow; */ /* opacity: 0; */ display: flex; flex-wrap: wrap; } .it { width: 100%; height: 410px; background: blue; } .il { width: calc(54% - (500px / 2)); background: yellow; } .i { width: 500px; height: 250px; background: transparent; border: 12px solid rgba(233, 30, 99, 0.72); box-sizing: border-box; } .ir { width: calc(46% - (500px / 2)); background: yellow; } .ib { width: 100%; height: 100%; background: #03A9F4; } .ib, .il, .ir, .it { background: rgba(3, 169, 244, 0.63); }

 <div class="m"> <img src="http://lukedowding.com/wp-content/uploads/BR2049-Wallpaper-Dam.png?x86078" alt="" > <div class="c"> <div class="it"></div> <div class="il"></div><div class="i"></div><div class="ir"></div> <div class="ib"></div> </div> </div>

I hope no need to explain how to use.

With calculations for themselves as a percentage or fixed - I think you figure it out yourself.
Probably they did not understand me. I need to hide everything outside the border, the white background was an example, there is nothing there, I just need to trim all the contents outside the container.
And the image that is inside it is stretched across the page, but at the same time, hidden outside the parent.

Answer 5 · 2019-03-16T13:27:44

Here's an adaptive solution! Next - yourself. I have to go. Good luck.

Code:

 .m { position: fixed; left: 0; top: 0; right: 0; bottom: 0; } img.f { object-fit: cover; width: 100%; height: 100%; } .c { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; /* background: yellow; */ /* opacity: 0; */ display: flex; flex-wrap: wrap; } .it { width: 100%; height: calc(50% - (250px / 2)); background: blue; } .il { width: calc(54% - (500px / 2)); background: yellow; } .i { width: 500px; height: 250px; background: transparent; border: 12px solid rgba(233, 30, 99, 0.72); box-sizing: border-box; } .ir { width: calc(46% - (500px / 2)); background: yellow; } .ib { width: 100%; height: 100%; background: #03A9F4; height: calc(50% - (250px / 2)); } .ib, .il, .ir, .it { background: rgba(3, 169, 244, 0.63); }

 <div class="m"> <img class="f" src="http://lukedowding.com/wp-content/uploads/BR2049-Wallpaper-Dam.png?x86078" alt="" > <div class="c"> <div class="it"></div> <div class="il"></div><div class="i"></div><div class="ir"></div> <div class="ib"></div> </div> </div>

Answer 6 · 2019-03-16T16:24:19

Hold on. With you as much as possible the benefits - at least. And support)

 wrapper { position: relative; min-height: 1000px; width: 100%; } .container { /* position: static; */ /* overflow: hidden; */ /* border: 1px solid #000; */ /* height: 250px; */ /* width: 500px; */ /* float: right; */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .inner { position: absolute; top: 0; /* left: 0; */ right: 0; /* bottom: 0; */ overflow: hidden; border: 1px solid #000; height: 250px; width: 500px; box-sizing: border-box; } .container .inner img { width: calc(100vw + 500px); margin-left: -100vw; height: 100vh; object-fit: cover; }

 <div class="wrapper"> <div class="container"> <div class="inner"> <img src="http://lukedowding.com/wp-content/uploads/BR2049-Wallpaper-Dam.png?x86078" alt=""> </div> </div> </div>

Vladimir Rodichev Vladimir Rodichev 614 13 bronze marks · Answer 7 · 2019-03-16T19:36:58

 body { margin: 0px; } .wrapper { position: relative; min-height: 1000px; width: 100%; } .container { position: static; overflow: hidden; border: 1px solid #000; height: 250px; width: 500px; float: right; box-sizing: border-box; } .inner { position: relative; width: 100vw; margin-left: calc(-100vw + 500px - 2px); height: 99.9vh; } .inner img { top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; position: absolute; width: 100%; height: 100%; }

 <div class="wrapper"> <div class="container"> <div class="inner"> <img src="http://lukedowding.com/wp-content/uploads/BR2049-Wallpaper-Dam.png?x86078" alt=""> </div> </div> </div>

How to trim a fixed element inside another container?

7 answers 7

More articles: