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;
}
Related
I have an inline element with relative positioning and multiline content.
It also contains a child with an absolute positioning.
So i want to align this child to the right position of the parent element (a code snippet below).
But the lines have different length, and child element is aligned to a shorter one of the lines.
The first question is why this happening?
And the second one: is the any way to fix this problem?
.container {
max-width: 150px;
background: lightgray;
}
.parent {
background: lightblue;
position: relative;
}
.child {
position: absolute;
width: 20px;
height: 10px;
background: salmon;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
right:0;
}
<div class="container">
<span class="parent">
Looooooooooooong Text here
<div class="child"></div>
</span>
</div>
It does not align to the shorter line, it aligns to the last line because it appears after that line in the HTML markup.
You can set the display mode of .parent to display: inline-block; in order to give it block boundaries, it makes more sense than positionning an element absoultely in relation to a normal inline layout.
Also, .child should be a <span> as well, <div> is a block element and it is not valid to put it inside a <span> which is an inline element[1]. The browser is forgiving and letting it work but you should avoid such a situation.
[1] In HTML5 the terms "block element" and "inline element" was replaced with another model, but the prencip still applies
.container {
max-width: 150px;
background: lightgray;
}
.parent {
background: lightblue;
position: relative;
display: inline-block;
}
.child {
position: absolute;
width: 20px;
height: 10px;
background: salmon;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
right:0;
}
<div class="container">
<span class="parent">
Looooooooooooong Text Here
<span class="child"></span>
</span>
</div>
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>
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
I need to make scrollable element with absolute positioned element inside and some big element for scrolling.
.container{
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
border: 1px solid red;
}
.content{
height: 300px;
background: green;
}
.wtf{
top: 0px;
position: absolute;
height: 10px;
width: 100%;
background: red;
}
<div class="container">
<div class="content">
</div>
<div class="wtf"></div>
</div>
http://codepen.io/anon/pen/pvKwvZ
In this example I need to keep red element inside of green square after scrolling to bottom.
Your .container is set to position: relative. That's why the .wtf-Element moves along with the .container-Element! The .container becomes the reference object for the .wtf-Element because of the position: relative.
To have the .wtf-Element fixed, your could remove the .container position: relative (or replace it by the default position: static), or ...
another approach would be to set the .wtf position: fixed. Again, this would position the .wtf-Element relative to the "outer html", not relative to the .container.
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