Hello.
How can you make an element inside an element that could go beyond its borders? Like that:

alt text

Here, the inner element is highlighted in blue. Red is the element containing blue. Well, I hope it is clear. Both external and internal elements are DIV elements.

PS
Do not use absolute positioning ( position: absolute )

  • position absolut fails? pure sport interest! - Palmervan
  • Not. It is impossible. - Anton Mukhin

2 answers 2

Well, you can not position: absolute , so use position: relative . View the example .

 <div> <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

and

 div { background: #900; width: 200px; height: 300px; margin: 0; padding-top: 10px; position: relative; z-index: 5; } div div { background: #FF0; width: 400px; height: 100px; margin-left: 10px; position: relative; z-index: 10; }

For the second option

 div { background: #900; width: 300px; height: 200px; margin: 0; margin-bottom: -300px; top: 150px; position: relative; z-index: 5; } div div { background: #FF0; width: 200px; height: 300px; top: -150px; margin-left: 10px; margin-top: 10px; position: relative; z-index: 10; }
  • See what happens if I try to make the second option ( jsfiddle.net/9kQap/1 ). I need to go square up, not down. - Anton Mukhin
  • I’m probably getting old)) Though shoot, but I can’t understand why you need it, but here you can turn around in this way . - Deonis
  • And how did you do it? !! Do not forget to transfer the code in response. - Anton Mukhin
  • How come? This question put me at a standstill more than the question of your post))) Maybe because I’ve been working on web development quite recently ... eight more years have not passed. Therefore, everything is fresh in memory;) - Deonis

I had a reverse question . float does not help?

  • Not. None of the answers solved the problem. With the first option there is no problem, if only it will be like this. Here with the implementation of the second - the problem. The element is going down, but I have to go up. - Anton Mukhin