my question is why changing padding in div.container affects div.blueBox? Since blueBox positioning is set to absolute it is taken out of normal flow, and should be positioned with relation to element.
HTML:
<body>
<div class="container">
<div class="box blueBox"></div>
</div>
<div class="box greenBox"></div>
<h1>Understanding CSS Positioning</h1>
<p><em>Absolute positioning</em> takes an element out of document flow, meaning the browser acts as if the element has no width and height, and the other elements on the page move up as if it was never there. The position of the element is then fixed relative to the top level container, or the closest parent with a set positioning.</p>
</body>
CSS:
body {
background-color: #1f1f1f;
height: 2000px;
color: #bfbfbf;
}
h1 {
font-weight: normal;
}
em {
color: #dd740b;
}
.box {
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.blueBox {
background: #627da0;
position: absolute;
}
.greenBox {
background: #5b8054;
}
.container {
background: rgba(0,0,0,.4);
padding: 10px;
}
http://jsfiddle.net/pawelpodsiadly/brdc8dvy/
Absolute positioning puts an element in place with respect to its closest ancestor that also has positioning other than static.
If you want .blueBox positioned relative to the body, set top and left values:
body {
background-color: #1f1f1f;
color: #bfbfbf;
}
.box {
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.blueBox {
background: #627da0;
position: absolute;
top: 0;
left: 0;
}
.container {
background: pink;
padding: 10px;
}
<body>
<div class="container">
<div class="box blueBox"></div>
</div>
<div class="box greenBox"></div>
<h1>Understanding CSS Positioning</h1>
<p><em>Absolute positioning</em> takes an element out of document flow, meaning the browser acts as if the element has no width and height, and the other elements on the page move up as if it was never there. The position of the element is then fixed relative
to the top level container, or the closest parent with a set positioning.</p>
</body>
If you wanted it positioned with respect to .container, you'll need to position .container:
body {
background-color: #1f1f1f;
color: #bfbfbf;
}
.box {
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.blueBox {
background: #627da0;
position: absolute;
top: 0;
left: 0;
}
.container {
background: pink;
padding: 10px;
position: relative;
}
<body>
<div class="container">
<div class="box blueBox"></div>
</div>
<div class="box greenBox"></div>
<h1>Understanding CSS Positioning</h1>
<p><em>Absolute positioning</em> takes an element out of document flow, meaning the browser acts as if the element has no width and height, and the other elements on the page move up as if it was never there. The position of the element is then fixed relative
to the top level container, or the closest parent with a set positioning.</p>
</body>
When adding a position absolute, you need to define:
position: absolute;
left: 0;
top: 0;
You need to define the rest of the position elements. Like top or left, etc.
You may also be wanting relative and not absolute.
.blueBox {
background: #627da0;
position: absolute;
top: 0;
left: 0;
}
Fiddle updated
Related
I want to set a div container inside another div-container. The info-Container should be placeable like where i want it (for example: float:right;) and another should be inside it.
But in my case it places the containers among themselves and not inside it.
Here my HTML-Code:
<div class="info">
s
<div class="info-header">
ss
</div>
</div>
And my CSS-Code:
div.info {
position: absolute;
background: yellow;
}
div.info-header {
position: absolute;
background: green;
}
Thanks in advance!
remove absolute position from the second div css and try
i hope work so:
body {
padding: 20px;
background-color: #20262e;
}
div.info {
position: absolute;
background: #ffdd57;
border-radius: 3px;
padding: 20px;
right: 0; /* if left comment hier */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
grid-gap: 10px;
}
div.info-header {
position: relativ;
background: #05ffb0;
border-radius: 3px;
padding: 20px;
font-size: 14px;
}
<div class="info">
s
<div class="info-header">
ss
</div>
</div>
The second div should not have absolute positioning. An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling
If you want to use absolute positioning on second div you have to set first div to position relative.
Check codepen for the example:
https://codepen.io/athapliyal/pen/aGYMvP
div.info {
position: relative;
background: yellow;
padding: 20px;
}
div.info-header {
position: absolute;
background: green;
}
I have a div element wrapping other div elements like so:
<div style="overflow:hidden">
<div id="a"></div>
<div id="b"></div>
</div>
I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.
What is the best way to achieve this?
Method 1
A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:
.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}
One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.
Method 2
Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:
http://jsfiddle.net/kv0bLpw8/
#wrapper {
width: 400px;
height: 50px;
position: relative;
z-index: 1000;
left: 0px;
top: 0px;
}
#wrapper #insideDiv {
width: 400px;
height: 50px;
overflow: hidden;
position: absolute;
z-index: 2000;
left: 0px;
top: 0px;
}
#wrapper #a {
position: absolute;
height: 30px;
width: 100px;
bottom: -40px;
z-index: 1000;
left: 0px;
}
<div id="wrapper">
<div id="a">AAA</div>
<div id="insideDiv">
<div id="b">BBB</div>
</div>
</div>
The easiest and most convenient way is to wrap your container div inside another div and set position: relative on the external div.
.outer-container {
position: relative;
height: 50px;
}
.container {
background: gray;
overflow: hidden;
height: 50px;
}
#a,
#b {
height: 100px;
width: 100%;
}
#a {
background: green;
position: absolute;
top: 60px;
}
#b {
background: red;
font-size: 60px;
}
<div class="outer-container">
<div class="container">
<div id="a"></div>
<div id="b">Cut off</div>
</div>
</div>
as people said, the element must be presented outside the parent in order to be not cropped. But you can do this with JavaScript to achieve the similar concept without having to change your actual markup:
function breakOverflow(elm) {
var top = elm.offset().top;
var left = elm.offset().left;
elm.appendTo($('body'));
elm.css({
position: 'absolute',
left: left+'px',
top: top+'px',
bottom: 'auto',
right: 'auto',
'z-index': 10000
});
}
then pass the element you want to exclude from the cropping of its parent:
breakOverflow($('#exlude-me'));
I do not understand whats wrong with my code. I mean, section element has the height, display value of my DIV element is definitly block and i really dont know how it works and how to combine these two elements differently positioned. Please give me your solutions and advices to learn something new today.
div {
position: relative;
margin: 0 30%;
}
div section {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100px;
background-color: yellow;
}
hr {
height: 2px;
background-color: blue;
}
<div>
<section></section>
</div>
<hr>
You want your hr on the bottom of the first div, right ?
However, this is not working because the parent div have an default height: auto property.
This mean that the parent div will have the height of his children.
When you set a position: absolute on a child, you are breaking this system.
The parent will no longer take care of his child.
So, if you want to make it works, you have two solutions:
- set a custom height (height: 100px) on the parent div (not good)
- remove the absolute position on the child section (default :position: relative)
div {
position: relative;
margin: 0 30%;
}
div section {
height: 100px;
background-color: yellow;
}
hr {
height: 2px;
background-color: blue;
}
<div>
<section></section>
</div>
<hr>
Your element has height set to AUTO. If you want to change your div height you need to write this in css.
div {
position: relative;
margin: 0 30%;
height: 200px;
background-color: red;
}
I think This is because your div has no height itself that's why it is not visible and it is increasing according to its child element which is section and is in absoulute position. I am not sure what you are up to but If you want to show the section inside the div along with the div's height the you must include the css for your div .
I provided an assumption solution for you hope it helps you
div {
position: relative;
margin: 0 30%;
background-color: green;
height: 150px;
}
section {
position: absolute;
top: 50px;
right: 0;
left: 0;
height: 50px;
background-color: yellow;
}
div hr {
height: 10px;
background-color: red;
}
<html>
<head>
</head>
<body>
<div>
<p>your div</p>
<hr>
<section>your section</section>
</div>
</body>
</html>
I have problem with a div below another div which has "position: absolute".
I need to make footer appear UNDER container div but now footer is appearing somewhere behind container.
Screen: (div with green background is footer)
HTML:
<div class="horni-panel">
<div class="logo">
Zhlednuto.cz
</div>
<div class="menu">
Home, about atd.
</div>
</div>
<!-- Mini pozadi -->
<div class="minipozadi">
ahoj
</div>
<!-- hlavni obsah -->
<div class="container">
Lorem ipsum dolor sit amet. x 40
</div>
CSS:
#font-face
{
font-family: Lato-Bold;
src: url(fonts/Lato-Bold.ttf);
}
body
{
font-family: Myriad Pro;
font-size: 17px;
color: #a1a8af;
background-color: #34495e;
}
.horni-panel
{
border-top: 8px solid #34495e;
position:absolute;
top:0;
left:0;
right:0;
height: 77px;
width: 100%;
background-color: #ffffff;
}
.logo
{
color: #34495e;
font-family: Lato-Bold;
font-size: 33px;
}
.minipozadi
{
height: 282px;
width: 100%;
background-image: url(img/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
margin: 0 auto;
position:absolute;
top: 85px;
left:0;
right:0;
z-index:1;
text-align:center;
font-size:30px;
}
.container
{
padding: 20px;
margin: 0 auto;
border-radius: 5px;
z-index: 100;
position:absolute;
top:0;
right:0;
left:0;
margin-top:266px;
width: 70%;
background-color: #ffffff;
border-rder-radius: 5px;
}
.footer
{
margin: 0 auto;
width: 100%;
height: 480px;
background-color: green;
}
Absolutely positioned elements will be removed from the flow of the document. So the footer moves up because container is not part of that flow. You would need to either use relative positioning on both, or absolute positioning for both and set their specific top and left values.
Alternatively you could set a top margin on footer that makes it drop enough so it is positioned below the container.
You also need to look at your css. There are several redundant properties that are possibly conflicting.
body
{
font-family: arial;
font-size: 17px;
color: #a1a8af;
background-color: #34495e;
}
.horni-panel
{
border-top: 8px solid #34495e;
position:absolute;
top:0; left:0;
height: 77px; width: 100%;
background-color: #ffffff;
}
.logo
{
color: #34495e;
font-family: Lato-Bold;
font-size: 33px;
}
.minipozadi
{
height: 100px; width: 100%;
position:absolute;
background-color: blue;
top: 85px; left:0;
z-index:1;
text-align:center;
font-size:30px;
}
.container
{
padding: 20px;
border-radius: 5px;
z-index: 100;
position:relative;
margin: 0 auto;
top: 120px;
width: 70%;
background-color: #fea;
}
.footer
{
margin-top: 120px;
width: 100%;
height: 80px;
background-color: green;
}
Here in this fiddle I removed some of the redundant css and used position:relative on the container div instead of absolute. The margin-top property on the footer needs to be greater than or equal to the top property on the container in order for it to stay below it.
You can insert another blank div over your non-absolute div and give it height as has your absolute div:
<div class="absoluteDiv">
<p>something</p>
</div>
<div class="blankDiv">
//nothing here
</div>
<div class="myDiv">
<p>some text</p>
<p>Which is covering absolute div</p>
</div>
CSS:
.absoluteDiv {
position: absolute;
left: 0;
}
.myDiv {
position: relative;
width: auto;
padding: 10px;
}
Now we can use JavaScript code to get the height of absolute div and give it to our blank div:
let absoluteDivHeight = document.getElementByClassName('absoluteDiv')[0].offsetHeight;
let blankDiv = document.getElementByClassName('blankDiv')[0];
blankDiv.style.height = absoluteDivHeight + 5 + "px";
Instead of using position:relative, you can keep both of the div with absolute positioning using JavaScript, as that seems closer to what you are looking for.
What you need here is a function that will set the top property of the footer div to the exact value you need it to be.
Here's the code:
document.getElementByClassName("container").style.top = (266 + document.getElementByClassName("footer").offsetHeight) + "px";
Here's the explenation:
document.getElementByClassName().style.top is a HTML DOM method used to change properties through JavaScript, in this case the property is top.
The 266 is the amount of pixels you set for property margin-top for your container div.
The document.getElementByClassName().offsetHeight function gets the height of an element in pixels (including padding and borders).
Finally, we add "px" to the number, so that the top
property is given in pixels.
This method has its pros and cons:
Pros:
the offset is based on the height of the container div, so it is always positioned directly below the div. You can keep using not only position:absolute, but you can use this method also for position:fixed.
Cons: You must rewrite the code if you add another div that would affect the positioning of the footer. The alignment will not change if you resize the window without reloading the page (you can fix this by running the code every time the window height changes.).
Use a separate wrapper div with 100% height and wrap your container in it that way the wrapper is following the standard flow of the page, and the container can be positioned absolutely within that wrapper, let me know if you need code example.
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