Hy guys.
I have a situation of overlay div inside another div.
Why the main div not fit the height size when i using position relative in a inner div to create a overlay.
See the picture
I cannot use position: absolute because i need the scroll working inside the main div.
See the code:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: relative; top: -52px; left: 0px; z-index: 1;
width: 350px; height: 50px; border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
I can use another css settings but i need to sinc the scroll of the inner divs.
If I understand your question correctly, this is what you need:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
position: relative;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: absolute;
top: 0;
left: 0px;
z-index: 1;
width: 350px;
height: 100%;
background: rgba(0,0,0,0.5);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2"></div>
</div>
</body>
</html>
position: relative still keeps the original space free for its element - it only moves the element away from its original position by the top/bottom/left/right values. But the free space is still where it is without those settings. A wrapping container with aut height will act as if the relatively positioned element still were at its original position, causing what you brought up in your question.
So to force a solution as you seem to want it, you'll have to use a fixed height and overflow-y: hidden on your container element.
div.main {
width: 300px;
height: 52px;
border: solid 1px black;
overflow-y: hidden;
}
div.box1 {
width: 350px;
height: 50px;
border: solid 1px red;
}
div.box2 {
position: relative;
top: -52px;
z-index: 1;
width: 350px;
height: 50px;
border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
Related
I am gonna to copy paste all the code, so you can check everything and understand what it's the problem. Thank you.
I just wanted to make it appear under the previously div. Just like it shoud be, because this problems not only appears with this div, but with everything else.
.presentazione
{
position: relative;
top: 100px;
width:auto;
height:auto;
text-align: center;
font-size:30px;
border: 2px solid red;
}
.sottofondo
{
position: relative;
display: inline-flex;
width: auto;
height: auto;
border: 2px solid grey;
}
.messaggio
{
position: relative;
width: auto;
height: auto;
border: 1px solid green
}
.sottofondo .icona
{
position: relative;
width: auto;
height: auto;
border:1px solid pink;
}
.preview
{
position: relative;
width: auto;
height: auto;
}
<div class="presentazione"> MESSAGE </br> OTHERS THINGS, BLA BLA BLA
<div class="sottofondo">
<div class="messaggio"> ANOTHER THING </div>
<div class="icona"> <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
</div>
</div>
<div class="preview"> PROBLEM HERE </div>
Your problem if I understood correctly is that you have on your presentazione element the top property which this makes the element to move 100px from the top of the page without pushing the other elements.
If you want it to have a 100px distance from top better use margin-top: 100px.
I removed the top property from that class and it seems to be correct. Check it out below:
.presentazione {
position: relative;
width: auto;
height: auto;
margin-top: 100px; /* changed from top to margin-top */
text-align: center;
font-size: 30px;
border: 2px solid red;
}
.sottofondo {
position: relative;
display: inline-flex;
width: auto;
height: auto;
border: 2px solid grey;
}
.messaggio {
position: relative;
width: auto;
height: auto;
border: 1px solid green
}
.sottofondo .icona {
position: relative;
width: auto;
height: auto;
border: 1px solid pink;
}
.preview {
position: relative;
width: 200px;
height: 200px;
}
<div class="presentazione"> MESSAGE </br> OTHERS THINGS, BLA BLA BLA
<div class="sottofondo">
<div class="messaggio"> ANOTHER THING </div>
<div class="icona"> <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
</div>
</div>
<div class="preview"> PROBLEM HERE </div>
Your .presentazione div's position is set to relative and its top:100px, so other elements are behaving like its still in its original position, therefore you see that overlap, you can try margin-top:100px instead of top:100px and it will work.
more info on relative positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I have the same problem and I don't know how to do it. I have a title and both the title and the outlined box are in a container div together. I offset-ed the outlined box for the design. I want what is inside the container divto not show but what is outside to do. If you don't understand here are some pictures.
image - container shown as thin blue border, outline box as thick orange
this is with overflow: hidden; on the container.
Here's how the code's looking:
<!DOCTYPE HTML>
<head>
<style>
.container {
position: absolute;
margin-left: 40px;
margin-top: 20%;
width: 450px;
height: 150px;
overflow:hidden;
border: 2px solid #0d00ff;
}
.slog-box{
position: absolute;
left: 50px;
top: -25px;
width: 450px;
height: 150px;
border: 5px solid #ff6600;
}
</style>
</head>
<body>
<div class="container">
<div class="slog-box"></div>
<p class="slogan" id="slogan">
el rujido se escucha
entre las montañas
</p>
</div>
</body>
</HTML>
you see, I want to accomplish the opposite of what overflow hidden does. anyone know? would greatly appreciate it!
You can do something like this:
.container {
position: relative;
width: 400px;
}
.slog-box {
position: absolute;
width: 120%;
height: 100%;
top: -30px;
left: 30px;
border: 3px solid orange;
}
.slogan {
border: 3px solid blue;
font-size: 40px;
}
https://jsfiddle.net/8uzwcy5d/3/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
#content{
width: 100%;
height: 100%;
margin-left: -8px;
margin-top: -8px;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: relative;
background-color: #615e57;
width: 100%;
height: 100%;
border: 1px solid grey;
margin-left: 250px;
}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
I'd like to ask why the div #maincontainer doesnt display with widht/height when they are set to be a 100%? If I switch them to a value, not a % it works perfectly fine...
And I'd also like to ask why do I have to set margin-left on that exact div just to make it 100% visible on the page, but it starts from the top (where the topsidecontainer starts) and not from the leftsidecontainer div as well.
Infos:
Position fixed works as the fixed position for the viewport which leave the space for the content you used (i.e the container of it)
without element inside it all container become 0 heighten (i.e body is 0 in height)
if ones parent's height is 0, then it's 100% height will not works which indicates the height of 100% is relative to it's parent. so, 100% of 0 is 0.
use vw or vh instead of 100% for this purpose. becuse it is relative to screen size.
topSideContainer & leftSideContainer are lost their spaces, so mainContainer starts from 0,0 position
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
*{
margin:0;
padding:0;
}
#content{
width: 100%;
height: 100%;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: relative;
background-color: #615e57;
width: calc(100vw - 250px);
height: calc(100vh - 60px);
border: 1px solid grey;
left: 248px;
top: 58px;
}
</style>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
% is a relative unit, when you say height:100% you mean i want this element to take the 100% of the height of it's parent.
You want #mainContainer to be have height:100% of it's parent, Well what is that parent ? and what is that parent's height ?
The parent is #content and it is also height:100% of it's parent, Well what is that parent ? and what is that parent's height ?
The parent is <body> and it's height is 0. Why? Because you didn't specify a height for it.
Do you see a pattern forming here ?
height:100% On the other elements work because you set their position to fixed, because of that they become relative to the initial containing block that is being <html>/viewport and <html>/viewport has a height/width (the browser basically)
Note: A position other than static or relative will take the element out of the document flow, meaning it will not affect other elements and there could be overlap
To achieve that layout, we can simply using flexbox if you don't mind changing the html.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
/* propagate the height from the html down to the body then #content */
}
#content {
display: flex;
flex-direction: column;
height: 100%;
}
#topSideContainer {
flex: 0 0 60px;
background-color: red;
}
#bottomSideContainer {
display: flex;
flex: 1;
}
#leftSideContainer {
flex: 0 0 250px;
background-color: orange;
}
#mainContainer {
height: 100%;
flex: 1 0 0;
background-color: pink;
}
<div id="content">
<div id="topSideContainer">
topSideContainer
</div>
<div id="bottomSideContainer">
<div id="leftSideContainer">
leftSideContainer
</div>
<div id="mainContainer">
mainContainer
</div>
</div>
</div>
Or CSS Grid without changing the html
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
#content {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr;
height: 100%;
}
#topSideContainer {
background-color: red;
grid-column: span 2;
}
#leftSideContainer {
background-color: orange;
}
#mainContainer {
background-color: pink;
}
<div id="content">
<div id="topSideContainer">
topSideContainer
</div>
<div id="leftSideContainer">
leftSideContainer
</div>
<div id="mainContainer">
mainContainer
</div>
</div>
Note: If the above code didn't work for you, try to share the link to your website so we can look and analyze your style sheet if you have any forced instructions that stopped the code to work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
#content{
width: 100%;
height: 100%;
margin: -8px;
padding: -8px;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: absolute !important;
background-color: #615e57;
max-width: 200% !important;
width: 100% !important;
background: yellow;
height: 100%;
border: 1px solid grey;
}
</style>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
I'm trying to figure out why the z-index property won't work. According to the mdn docs, as long as they are positioned elements, with a z-index, it should work. I have 3 divs, each nested in each other. I am just trying to get the z-index to work, so I give the .outer-div a z-index: 3 while giving the .inner-div a z-index: 1. According to the docs, the greater the z-index, the closer it is to the observer. Doesn't that mean the purple in the .outer-div should cover up the red div in .inner-div?
.outer-div {
height: 200px;
width: 200px;
background: purple;
position: relative;
z-index: 3;
border: 1px purple dotted;
}
.middle-div {
height: 150px;
width: 150px;
background: blue;
position: relative;
z-index: 2;
border: 1px
}
.inner-div {
height: 100px;
width: 100px;
background: red;
position: relative;
z-index: 1;
border: 1px
}
<div class="outer-div">
<div class="middle-div">
<div class="inner-div"> </div>
</div>
</div>
If you want to achieve this functionality, you should make some changes. By default, HTML behaviour is only the last(child) element will populate on top.
If you do like below, it will work :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>demo!</title>
<style>
.outer-div {
height: 200px;
width: 200px;
background: purple;
position: relative;
z-index: 3;
border: 1px purple dotted;
}
.middle-div {
height: 150px;
width: 150px;
background: blue;
position: relative;
z-index: 2;
border: 1px
}
.inner-div {
height: 100px;
width: 100px;
background: red;
position: relative;
z-index: 1;
border: 1px
}
.visual{
opacity: 0.7;
}
</style>
</head>
<body>
<!-- <div id="example"></div> -->
<div class="outer-div">
<div class="middle-div">
<div class="inner-div"> </div>
</div>
</div>
<div class="outer-div visual"></div>
<div class="middle-div visual" style="top:-150px; z-index: 2;"></div>
<div class="inner-div visual" style="top:-250px; z-index: 1;"></div>
</body>
</html>
Hope, I understood the problem and hope this would help
I am using position: absolute; so my div can be placed at the bottom, but I also need to use float: left; so that each new div will be placed next to it, but they are just being placed in the same spot, any suggestions?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.media_container{
min-width: 800px; max-height: 800px;
min-height: 300px; max-height: 300px;
border: 2px solid #f00;
position: relative;
}
.media_header{
min-width: 220px; max-width: 220px;
min-height: 50px; max-height: 50px;
border: 2px solid #f00;
float: left;
/*position: absolute;*/
margin-left: 30px;
bottom: 30px;
}
</style>
<title>Test</title>
</head>
<body>
<div class='media_container'>
<div class='media_header'>Header 1</div>
<div class='media_header'>Header 2</div>
<div class='media_header'>Header 3</div>
</div>
</body>]
jsFiddle DEMO
In order to float divs at the bottom of the webpage, your container needs to be set absolute and placed at the bottom.
Then, all contents in this container are relative along with your float requirements. Done!
.media_container {
position: absolute;
bottom: 0;
min-width: 800px;
max-height: 800px;
min-height: 300px;
max-height: 300px;
border: 2px solid #f00;
}
.media_header {
position: relative;
float: left;
margin-left: 30px;
margin-top: 30px;
min-width: 220px;
max-width: 220px;
min-height: 50px;
max-height: 50px;
border: 2px solid #f00;
}
If all the divs have the same position:absolute attribute then they are all going to overlap.
Have a parent div for the divs that you want to show at the bottom. And style this parent div with position:absolute and bottom:0
Heres the JSFIDDLE. I hope this is what you want.