I am trying to do a tableless
layout, and I have the following
HTML snippet:
<div class="slider-inner">
<div class="slider-pane">
<div class="container">
<p>...</p>
<div class="did-you-knoow">
<div class="facts">
</div>
<div class="marquee-container">
</div>
</div>
</div>
</div>
</div>
Which is styled w/ this CSS:
div.slider-pane {
width: 1024px;
}
div.container {
display: block;
}
div.facts {
margin-right: 60%;
}
div.marquee-container {
position: absolute;
top: 0;
right: 0;
margin-left: 0;
margin-right: 0;
padding: 10px;
width: 60%;
}
I want the div.facts to occupy the left-40% , and the div.marquee-container
to occupy the right-60% of the div.did-you-know (their immediate parent). I
expect the div.marquee-container to be positioned relative to its parent, and
its width to be 60% of its parent, but its positioning and width are relative
to div.slider-inner, which is 2 levels above its parent.
How do I set the position and width of div.marquee-container relative to
its parent, and not the div three levels above it?
add position:relative to div.container
#locrizak's answer is correct, I needed to add 'position:relative' to the div.container, but I needed to add it to the div.did-you-know as well. In other words, I needed to set all of the containing div's to position:relative in order for the elements in question to be positioned relative to the immediate parent.
I found this was also answered in the MDN page for css position under the 'absolute' definition:
[The browser will] position [the element] at a specified position relative to its closest positioned ancestor or to the containing block
However the W3C reference was not as helpful.
Related
This question already has answers here:
Pseudo element not full container width when border used
(3 answers)
Closed 1 year ago.
As I know, child's width percentage's standard is parent's content box(only the content, without padding or margin.). So if there's a padding in parent and child's width is 100%, child's width is smaller than parents. But If I position child as a absolute and parent as a relative, child's width is just equal to the parent's no matter padding and margin in parents. Like this:
<div class="first">HI
<div class="second">
HELLO
</div>
</div>
css code
.first{
background-color: yellow;
width:100px;
height:100px;
padding:10%;
position:relative;
}
.second{
background-color: blue;
position:absolute;
width: 100%;
height:100%;
opacity:40%;
}
Eventhough parent's position and relative so Child is totally dependent on '.first'. What's the standard of child's width in this case?
This snippet shows the result of setting the second div to have position relative and then position absolute. You can see that the absolutely positioned element takes on the width of its parent including the padding.
.first {
background-color: yellow;
width: 100px;
height: 100px;
padding: 10%;
position: relative;
}
.second {
background-color: blue;
width: 100%;
height: 100%;
opacity: 40%;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
<h2>The blue square has relative position</h2>
<div class="first">HI
<div class="second relative">
HELLO
</div>
</div>
<h2>The blue square has absolute position</h2>
<div class="first">HI
<div class="second absolute">
HELLO
</div>
</div>
The reason seems to be that:
when a box has position: absolute its containing box is the parent's padding box.
See the accepted answer to: Absolute positioning ignoring padding of parent though I am struggling to find the exact description of that in the actual standard documents and it would be good if someone could point out a primary reference.
UPDATE: thanks to Temani Afif who has pointed out this SO answer which has info. from an actual specification:
The standard of the % for position:absolute is of the nearest positioned ancestor block and if no ancestor is positioned, it is relative to body element. In your case since the first is positioned relative the second will be relative to first and if u remove the position attribute of first, second will be positioned relative to body.
You can also check this - https://www.w3schools.com/css/css_positioning.asp
As you can see in http://jsfiddle.net/omarjuvera/v93us4n9/6/ the paragraph is not where it should be, since I am overlapping two images. How can I fix this?
HTML
<h1>Overlaping two images</h1>
<div>
<img src="http://img.youtube.com/vi/brMyE7To7Sg/0.jpg" />
<img src="http://oi57.tinypic.com/2u8kr2s.jpg" />
</div>
<br/>
<p>For some reason, this paragraph is not below DIV, but under/over</p>
CSS
div {
position: relative;
}
img {
position: absolute;
left: 0px;
top: 0px;
}
It's because both of the img elements are absolutely positioned and removed from the flow.
Due to this, the parent div element collapses upon itself and has a height of 0. Unless the parent div element has explicit dimensions, in this case a height, the text will overlap.
Setting an explicit height on the parent element will solve this, but that's not a very flexible solution.
In your case, since the img elements are the same size, you could solve this by only absolutely positioning a single img element. In doing so, the height of the parent div element will be defined based on the height of the img element that isn't absolutely positioned.
Updated Example
<div>
<img src="//placehold.it/480x360" />
<img class="overlay" src="http://oi57.tinypic.com/2u8kr2s.jpg" />
</div>
div {
position: relative;
}
img.overlay {
position: absolute;
left: 0px;
top: 0px;
}
I would like to do a responsive design for the popup notifications in my application.I'm using Angular Toaster for the notifications.
For instance I have located the toaster-container element in the center of the screen, but using an absolute position,so for smaller screens the notifications stay in the same position so they are not displayed. I would like to make the notifications relative to the parent element where they are contained, (in this case the container grid). How do I achieve that using CSS? This is my html code:
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container-custo','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" ></div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"></div>
<!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
<div id="loader" class="loading overlay" data-ng-if="loader.loading">
<p>We are loading the products. Please wait...</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
</body>
And the custom css rule I use for the toaster-container element:
.toast-container-custo
{
position: absolute;
top:100px;
left: 780px;
}
Use percentages instead of pixels
You can make your div relate to it's container using percentages both for width/height and top/left values. The percentage you use here will be in relation to the parent container size. So if your parent container is set to width:300px and your child is set at width:50% then the child will be rendered at width:150px;
Use relative positioning for the element.
Relative positioning, is just what it says on the label - it positions the element relative to other elements. So you also need to set the element to position:relative;
Here is how I would go about this:
.toast-container-custo{
position: relative;
margin: 0 auto;
width: 30%;
height:30px;
}
margin:0 auto will center
the child elements within it's container, horizontally
the width now is 30% of the parent container
the height, well, I just prefer to set this at a fixed px value but
you can definetely use % here as well
You can change your container to:
.toast-container-custo{
position: absolute;
top: 100px;
margin-left: auto;
float: none;
margin-right: auto;
left: 0;
right: 0;
}
Generally, this is a good way to center horizontally absolute elements.
Why does wrapper div not have a height? If I set the height (height:200px) the green background appears but how to set with auto height?
Here is my code (JSFiddle):
HTML:
<div class="wrapper">
<div class="effect"></div>
<div class="content">
...content
</div>
</div>
CSS:
.content {
position: absolute;
background-color:red;
}
.wrapper, .effect {
background: green;
}
.wrapper {
position: relative;
width: 630px;
}
.effect {
width:100%;
position: absolute;
}
It is not working (i.e. parent element not having any height) because all the immediate descendant of the .wrapper element is absolutely positioned — this will have the effect of taking them out of the flow of the document, therefore causing the parent's dimension to collapse to nothing.
You will also notice that the effect is the same when you float all
descendants of the parent wrapper, because float also has the
effect of taking normal elements out of the document flow.
There are only two ways to prevent this from happening, both of which involving declaring a certain height for the parent .wrapper element:
Either you explicitly state a height for the parent (see example fiddle)
Or use a relative height (say, in percentages or viewport units) that is not dependent on its own content.
You should reconsider your design strategy, and what you're trying to achieve. There is probably other ways to achieve what you intend to do, will you mind showing us?
Attempt #3.
Using css, with a strict doctype, can someone please draw 4 div boxes to meet these requirements.
The wrapper or outermost div will scale in height. That means that it could be any height.
The middle div should always be 100% high to match the outer/parent div (#1 in my list)
The next div should be positioned inside, and at the top of div #2
The last div should be positioned inside, and at the bottom of div #2
NOTES:
If you use absolute positioning for this, you will put divs 3 and 4 outside of div #1 and that won't work. The key is to keep divs 3 and 4 within div #2
<div id="wrapper">
<div id="middle">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</div>
#wrapper { height: 200px; position: relative; }
#middle { height: 100%; }
#bottom { position: absolute; bottom: 0; }
It should work for any height you give the #wrapper.
you can play with it here: http://jsfiddle.net/dmBsa/