I know that there are a lot of questions about positioning out there, including about absolute positioning inside a relative parent.
I've read many of these questions and found a informative link on css-tricks (Absolute positioning inside relative parent). After all troubleshooting fails, I turn to you ;)
This JSFiddle contains I think is right, but clearly isn't.
Why are the child elements of the parent div positioned relative to the body and not the div?
code:
<div id="editorWrapper" style="posotion: relative; width:751px; height:250px; margin-left: 20px; margin-top: 20px; border: 1px solid blue;">
<a class="lnk" href="http://www.google.be" style="display: inline-block; position:absolute; left: 1%; top: 1%; padding: 5% 5%;"></a>
<a class="lnk" href="http://www.google.be" style="display: inline-block; position:absolute; left: 80%; top: 80%; padding: 10% 10%;"></a>
<div style="position: absolute; padding: 10px; left: 60%; top: 60%; background-color: red;" />
</div>
EDIT
The answer is just a typo. posotion should be position in the parent div.
For future references: this positioning methods does in fact work :)
Thanks Gaurang!
Take note: You have written posotion: relative in the style attribute of div#editorWrapper. It should be position: relative instead.
Fixed Fiddle
Related
I've implemented a template with static heights. I've changed it's content height to fit to child heights, but parent <main> and parent <section> aren't getting the autocalculated height.
Why?
I'm getting insane with this issue.
HTML:
<section class="seccion-productos">
<div id="sidebar">...</div>
<div id="grid-selector">...</div>
<div id="grid">...</div>
</section>
</main>
<footer>...</footer>
CSS:
#sidebar{
float: none;
height: auto;
width: 22%;
padding: 1% 0 0 2%;
}
.seccion-productos {
position: relative;
width: 100%;
}
#grid-selector {
width: 78%;
position: absolute;
top: 0;
left: 22%;
right: 0;
display: flex;
vertical-align: middle;
}
#grid {
width: 78%;
height: auto;
top: 90px;
left: 22%;
}
Undesired Result, parent content doesn't fit child content
I am just asking what things can make this happen and what should I do to solve it. Or if i'm missing something. Or where I have to look.
You also can see full code in here:
https://randal-es.000webhostapp.com/php/paginas/productos.php
#Arngue, as #Johannes says, if you put a child element with absolute positioning it won't affect the parent element even if the parent element has position relative. The only thing that the parent's relative position affects is the origin of coordinates for absolute positioning. You need to change the position definition for #grid-selector otherwise it will always break your layout.
The position: absolute; of the #grid-selector element takes it out of the size calculation context for the parent. Change that to relative
How to make the <div> inside wrapper bigger than wrapper itself without change the structure?
HTML
<div class="page row1">
<div class="home-wrapper row2">
<div class="home-slider row3"></div>
</div>
<div>
CSS
.page { width: 100%; height: 400px; border: 1px solid #000; background: #eee; }
.home-wrapper { width: 90%; height: 400px;border: 1px solid red; background: #ccc; margin: 0 auto;}
.home-slider{ width: 100%; height: 200px; border: 1px solid blue; background:#000; }
http://jsfiddle.net/46vpqmgh/1/
I want the black box is same width with the page <div> without change the structure, using only CSS.
Thanks
Add:
position: absolute to .home-slider to pull it out of the normal flow
top: 0 and left: 0 to .home-slider to position it correctly
position: relative to .page to make it's children absolute positioned elements relative to it
Percentage height and width will be calculated based on the size of .page.
Have a fiddle!
Added CSS
.page {
position: relative;
}
.home-slider {
position: absolute;
left: 0;
top: 0;
}
Read more about the CSS position property over on the MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
In our example above, the nearest positioned "ancestor" is .page
Add the following properties. Looks fair to me.
.home-slider {
/* ... */
z-index: 1;
margin-left: -5%;
position: fixed;
}
Change the following class:
.home-slider {
width: 100%;
height: 200px;
border: 1px solid blue;
background:#000;
position: absolute;/*Add position absolute*/
left: 0;/*Add left to 0*/
}
fiddle
I'm trying to have a set of parents with float left applied to them, but also with relative position, and inside each of them I have a div with position absolute like this:
<div class="wrapper">
<div class="pa">
<div id="apDiv1"><img src="images_1/logo-u16785.png" width="194" height="190"></div>
</div>
<div class="pa">
<div id="apDiv4"><img src="images_1/zilogo-u16782.png" width="194" height="190"></div>
</div>
</div>
and the css
.wrapper {
width:1300px;
position: relative;
}
.pa {
float:left;
width:650px;
position: relative;
}
#apDiv1 {
position: absolute;
width: 650px;
height: 190px;
z-index: 4;
left: 39px;
top: 10px;
}
#apDiv4 {
position: absolute;
width: 650px;
height: 190px;
z-index: 4;
left: 39px;
top: 10px;
}
now my problem, if u see, the 2 selectors has the same top and left, but because they are in 2 different, parent which are floated left and with position relative I thought the selectors should be positioned relative to their parent, but they are on top of each other, why??
thanks!!!
I'm not sure if this is what you're looking for but first make sure your CSS classes and DIVs have the same name.
I changed float: left; from the ".pa" div to display: inline-block;.
Check my Fiddle
It's possibly because the absolute-positioned elements aren't aware of the floated elements' boundaries, but I suspect most likely because you have styles for #apDiv1 and #apDiv2 but your actual element IDs are "apDiv1" and "apDiv4".
I have some divs at my HTML and one of them is loading image div so I want it overlap its parent div. Here is my code:
<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
<div id="child" style="position: absolute; border: 15px solid #a2f2e2"></div>
</div>
</div>
When I use different positions (i.e. absolute, relative etc.) child div couldn't overlap its parent. Here is my fiddle link: http://jsfiddle.net/yNFxj/4/ I don't want to see anything from parent div but I want to see that child div increased as parent's size and overlapped it.
Any ideas about how can I dot it just with pure html and css and with a generic way to implement it my any other pages?
PS: Border, width, height etc. are just for example, it can be removed.
Sajjan's the closest from what I can tell, but his has a few flaws:
Position: absolute requires its parent to have a non-static position (this is often done with position: relative, which effectively works the same way as static).
You don't need to set the height and width of the child, just the parent.
Here's my Fiddle for it to demonstrate.
#parent {
border: 5px solid gray;
position: relative;
height: 100px;
width: 100px;
margin-left: 50px;
}
#child {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background: red;
}
The key here is the position: relative on the parent.
I am curious, though, what exactly you're trying to achieve with this. I have a feeling that whatever it is, there's a better way.
Why doesnt this work for you? If i understand you right, you just want to mask the parent DIV with the child DIV?
<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
<div id="child" style="position: absolute; border: 15px solid #a2f2e2;top:0;left:0;width:200px; height:250px;"></div>
</div>
</div>
Output on chrome:
To make it generic, get the parents position/dimension using offsetTop/Left/Height/Width methods and set the child's dimensions/position using these, im sure there are plenty of posts on SO that do this..
First problem is that absolute positioned elements refers to the first parent element with a position different from static.
This means that if no parents have fixed, relative, or absolute position, it will refer to the body, that is not what you want in this case.
Then put position: relative; to your parent div.
Second problem: with absolute position, you can stop using width and height and start using top, left, bottom and right properties;
Setting all them to 0 means extends the object to the parent boundaries.
But here you want to overlap them, then... simply, use a negative value equals to the size of the parent borders: 15px;
top: -15px;
left: -15px;
bottom: -15px;
right: -15px;
Demo: http://jsfiddle.net/yNFxj/9/
I've used dashed borders so you can see the underneath parent's borders ;)
Try this:
<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;position:relative; width:200px; height:250px;">
<div id="child" style="position: absolute; border: 15px solid #a2f2e2; width:200px; height:250px; left:-15px; top:-15px"></div>
</div>
</div>
update a fiddle for you http://jsfiddle.net/yNFxj/16/
HTML
<div id="something1">
<div id="something2"></div>
<div id="parent">
<div id="child"></div>
</div>
</div>
CSS
#parent {
width: 100px;
height: 300px;
background-color: #a0a0a0;
width:200px;
height:250px;
position: relative;
}
#child {
width: inherit;
height: inherit;
position: absolute;
background-color: #a2f2e2;
top: 0px;
left: 0px;
}
Works fine
EDIT: added with and height inherit for you & positioned properly
I have an element on my page that i want to position using "position:absolute". Therefore, I have added "position: relative" to #pagewrap. I now want to do the same thing for other elements in the #page, but when I also add "position: relative" to that, all the elements before having #pagewrap as a parent now switches to #page.
The element I am talking about is: #copyright-logo
What do I do to avoid this?
#pagewrap {
width: 1050px;
margin: 0px auto;
background-color: rgb(255,255,255);
overflow: hidden;
-moz-border-radius: 15px;
border-radius: 15px;
position: relative;
}
#page {
width: 960px;
margin: 0px auto;
background-color: rgb(255,255,255);
overflow: hidden;
}
#copyright-logo {
position:absolute; bottom: 10px; right: 10px
}
Absolutely positioned elements are positioned relative to the nearest enclosing positioned element, which may be another absolutely positioned element or alternatively a fixed or a relatively positioned element.
CSS position property
Make your #copyright-logo the direct child of #pagewrap and not #page
<div id="pagewrap">
<div id="copyright-logo"></div>
<div id="page"></div>
</div>
You are overusing relative and absolute positionning.
There is absolutely no need to relatively position #pagewrap, simply center it with margins as in:
#pagewrap { width: 1000px; margin: 0 auto; }
In any case, don't overuse those positions but use floats and padding and margin.