How to make the green div wrap around the blue and yellow divs (his children)
in this particular problem:
https://jsfiddle.net/y74ueuLa/
HTML
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
CSS
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
}
#one {
width: 100%;
height: 150px;
background-color: blue;
position: absolute;
z-index:-1;
}
#two {
position: relative;
top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
}
The green div is wrapped around the blue div. It just doesn't appear that way because the blue div is on top.
With div #two you're positioning it relatively with top 100px. When you position something relative, you're moving the visual component of the div relative to where it would naturally fall in the browser. It's equivalent to saying "visually move down 150px from where you are". You could just make the green div taller, but I don't think that's what you're going for.
I think what you're trying to do (and please correct me if I'm wrong), is this:
https://jsfiddle.net/dk6L1zLL/
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
padding-top:10px;
padding-bottom:10px;
}
#one {
//width: 100%;
height: 150px;
background-color: blue;
//position: absolute;
z-index:-1;
margin:0 10px 0;
}
#two {
//position: relative;
//top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
/*margin-bottom: 500px;*/
}
#footer {
height: 100px;
background-color: red;
width: 100%;
position: relative;
z-index: -3;
}
<body>
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
</body>
I got rid of a lot of the positioning rules and added some margin and padding.
Related
I need a div to float within another div. Tried using position: fixed, but the div floats beyond the parent div now.
Here is the sample code.
I need the "Div to Float" to float inside "Div 1". now it floats outside 'Div 1' and go behind 'Div 2'
Here is the code.
.wrapper {<!--from www .j av a2s.c o m-->
width:100%;
height: 200px;
overflow-y: scroll;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
}
.element {
background:yellow;
position:fixed;
width:101px;
height:71px;
top:51px;
right:0px;
left:769px;
border:2px solid blue;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">Div to float</div>
</div>
</div>
<div class="container" style="margin-top: 30px; background: purple">Div 2</div>
What I've tried?
.wrapper {<!--from www .j av a2s.c o m-->
width:100%;
height: 200px;
overflow-y: scroll;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
}
.element {
background:yellow;
position:fixed;
width:101px;
height:71px;
top:51px;
right:0px;
left:769px;
border:2px solid blue;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">Div to float</div>
</div>
</div>
<div class="container" style="margin-top: 30px; background: purple">Div 2</div>
What I've expected?
I need the "Div to Float" to float inside "Div 1".
What is the result now?
Now it floats outside 'Div 1' and go behind 'Div 2'
.container {
position:relative;
}
.element{
position:absolute;
}
I don't fully understand what you mean by "float", but this code will place your div.element inside div.container
Position: Fixed
position: fixed; is positioning the element relative to the viewport, which means it always stays in the same place even if the page is scrolled.
Position: Sticky
position: sticky; is positioning the element relative until a given offset position is met in the viewport - then it "sticks" in place. When the user scrolls past the parent div, the element will stay with its parent.
Read more about Layout positioning
.wrapper {
width: 100%;
height: 200px;
overflow-y: scroll;
position: relative;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
z-index: 2;
}
.second {
z-index: 0;
}
.element {
background: yellow;
position: sticky;
width: 90%;
height: 80px;
top: 50px;
right: 0px;
left: 769px;
border: 2px solid blue;
}
.fixed {
position: fixed;
top: 50px;
left: 0;
width: 50%;
z-index: 1;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">I am 50px away from the top of my green parent, and I will stop being sticky when document gets scrolled away from my parent.</div>
</div>
<div class="fixed" style="margin-top: 30px; background: red">I am just gonna stay in this place forever cause I'm fixed. Using z-index on me or the elements will control whether I'm above or below any other elements.</div>
</div>
<div class="container second" style="margin-top: 30px; background: purple">Div 2</div>
if I have two divs on my page. One has fixed positioning at the top of the page style="position:fixed; left:0; top:0;right:0;" and one has fixed positioning to the left of the page style="position:fixed; left:0; top:0;bottom:0;" is there any way to have the left div positioned so it's top edge lines up with the bottom edge of the top positioned div without hard coding margins or padding? By default there will be some partial overlap
Placing both the div in another container div and defining the position:fixed style to the container div would solve your issue.
<div style="position:fixed;top:0;left:0;right:0;">
<div>div 1</div>
<div>div 2</div>
</div>
Try this
.div0{
position: relative;
width: 600px;
height: 400px;
background: blue;
perspective: 100px;
}
.div1{
position:fixed; left:0; top:0;right:0;
width: 200px;
height: 200px;
background-color: red;
}
.div2{
position:fixed; left:200; bottom:0;
width: 200px;
height: 200px;
background-color: green;
}
<div class="div0">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
Try this, I think you want to do the same.
.parent{
position: relative;
background-color: #000;
width: 600px;
height: 400px;
}
.child1,.child2{
position: absolute;
left: 0;
background-color: #f00;
height: 190px;
}
.child1{
top: 0;
right: 0;
}
.child2{
bottom: 0;
width: 200px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
If the top div has a defined height, you can simply take that value and use if for the left DIVs top setting:
.top,
.left {
position: fixed;
}
.top {
top: 0;
left: 0;
right: 0;
height: 100px;
background: red;
}
.left {
top: 100px;
bottom: 0;
left: 0;
width: 150px;
background: green;
}
<div class="top"></div>
<div class="left"></div>
Is it possible, to fix a div bar at the top of the page even when scrolling, and
still be able to fully see the next div?
The bar div is given a height of 15vh and the other divs are set to 85, so when You see the first view of the page divs #bar and #one are displayed.
I would like that after scrolling down that divs #bar and #two are seen. I tried everything: giving margin, padding, position relative, absolute, adding to #one top: 15vh;. Tried also putting div on #one and #two divs.. made all combinations..
This is the code I have so far that is the closest to what I mean and can't find how to go futher
* {
margin: 0;
padding: 0;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#bar {
background-color: gray;
height: 15vh;
position: fixed;
width: 1000px;
}
#one {
background-color: blue;
height: 85vh;
}
#two {
background-color: red;
height: 85vh;
}
<div id="container">
<div id="bar"></div>
<div id="one"></div>
<div id="two"></div>
</div>
Add padding-top:15vh; to #one to create/add the part which is hidden behind the fixed navbar
* {
margin: 0;
padding: 0;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#bar {
background-color: gray;
height: 15vh;
position: fixed;
width: 1000px;
}
#one {
background-color: blue;
padding-top:15vh;
height: 85vh;
}
#two {
background-color: red;
height: 85vh;
}
<div id="container">
<div id="bar"></div>
<div id="one"></div>
<div id="two"></div>
</div>
I working a layout that changes the behavior of z-index.
Is this possible?
The yellow box is a dropdown menu. It should be inside the Red box.
Pretty much anything is possible with CSS3. However the element inside div 1 would need to be separate for this to work. If it's inside div 1 it will drag div 1 around with it. You'll get much more flexibility if the side div is on it's own
But for your specific example you would need something like:
HTML:
<div class="top"></div>
<div class="bottom"></div>
<div class="side"></div>
CSS:
.top {
width: 90%;
margin-left: 10%;
height: 200px;
height: 250px;
background: red;
}
.bottom {
width: 90%;
height: 200px;
height: 250px;
margin-left: 5%;
background: grey;
margin-top: -150px;
}
.side {
width: 20%;
height: 200px;
height: 250px;
margin-left: 78%;
background: yellow;
margin-top: -300px;
}
Working CodePen is here too: https://codepen.io/WebDevelopWolf/pen/mBLqxm
Not sure why this works, but it may be helpful for you:
#div1, #div2{
width: 100%;
height: 400px;
}
#div1{
background-color: red;
position: relative;
}
#div2{
background-color: green;
}
#div2{
margin-left: 50px;
margin-top: -300px;
position: relative;
}
#div1 > div{
background-color: yellow;
position: absolute;
width: 200px;
height: 200px;
right: 0;
top: 50px;
z-index: 2;
}
.as-console-wrapper{ display: none !important;}
<div id="div1">
DIV 1
<div>INSIDE DIV 1</div>
</div>
<div id="div2">
DIV 2
</div>
Here is all you need
div {
height: 100px;
width: 100px;
background: #ccc;
position: absolute;
top: 0;
left: 0;
}
.div1{
background: #f00;
}
.div2{
top: 30px;
}
.div_child{
background: #3a2525;
left: auto;
right: 0;
width: 50px;
z-index: 1;
}
<div class="div1">
1
<div class="div_child">
child
</div>
</div>
<div class="div2">
2
</div>
Please see the attached image,I want to design this in html,Quite successful.But when I test it on different resolutions the red box moves here and there.I made the design in 100% width and height 100%
<style type="text/css">
#green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; }
#blue-box { width: 25%; background: blue; float: left; height: 100%; }
#red-box {
position: relative;
top: 50px;
left:450px;
width: 357px;
background: red;
height: 207px;
margin:0 auto;
}
#green-box-content
{
margin:0 auto;
width:1600px;
height:800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>
Part of the problem is in how you are trying to position the element. It looks like you want it to be centered between the blue and green, but you're positioning from the left-hand side. Once the width of the green changes, it won't be where you want it. It would be better to position from the right (the border between the two) and set right to -1/2 of the width.
Also, 100% height will only work if the parent containers have a set height
Here's the modified CSS, and a fiddle to demonstrate
#blue-box,
#green-box {
height: 300px;
}
#green-box {
position: relative;
width: 75%;
float: left;
background: green;
}
#blue-box {
width: 25%;
float: left;
background: blue;
}
#red-box {
position: absolute;
top: 50px;
right: -178px; /* width / 2 */
width: 357px;
height: 207px;
background: red;
}
Remove width and height from #green-box-content, works perfectly in my local.
#green-box-content
{
margin:0 auto;
}
check this after making the change in my local.
I think you should Percentage of the red box as you have used it for green and blue and position as absolute.
http://jsfiddle.net/ccEKk/
if I am wrong update the fiddle so that someone can help you with it
#red-box {
position: absolute;
top: 5%;
left:45%;
width: 35%;
background: red;
height: 20%;
margin:0 auto;
}