I have a div ".container" with two divs: first ".blue" and second ".green".
I got my green div fixed to the bottom-0, but I need to put the first div blue to backboard the green div.
http://jsfiddle.net/washington_guedes/k959kmqd/
css:
.container{
position: relative;
width: 100%;
}
.blue{
position: relative;
width: 100%;
background-color: #acf;
}
.green{
position: fixed;
bottom: 0;
width: 100%;
height: 250px;
background-color: #bfb;
}
html:
<!-- some divs before -->
<div class="container">
<div class="blue">Blue</div>
<div class="green">Green</div>
</div>
You could set both div to be absolute position and then play with whatever you need to do:
.container{
position: relative;
width: 100%;
}
.blue,
.green {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 250px;
}
.blue{
background-color: #bbf;
}
.green{
background-color: #bfb;
top: 250px;
}
Divs in top of each other http://jsfiddle.net/vfpzbj9q/
Divs overlapping http://jsfiddle.net/wkkyoz0h/
Related
I have one outer div and two children divs. I want the outer div fixed to the window, one child div to the left most of the parent div and another to the right most of the parent div.
When I position: fixed the parent, it is fixed to the window but the two child divs stick to the left and overlap. If I position: relative the parent, the two child divs stick to the left and right respectively but it is not fixed to the top of the window.
How can I do it? Thanks!
<div class="nav-wrapper">
<div class="child1"></div>
<div class="nav-pages"></div>
</div>
My css:
nav {
#media only screen and (min-width: 0) {
height: 3em;
.nav-wrapper {
padding: .7em 1em 0 1em;
}
}
#media only screen and (min-width: $medium-screen) {
height: 500px;
.nav-wrapper {
padding: 0em 1em 0 1em;
height: 64px;
position: relative;
background-color: rgba(60,63,65,0.22);
}
}
}
nav {
background-image: url("http://image.insider-journeys.com/overview/china.jpg");
background-size: cover;
}
.navbar-non-link {
padding: 0 15px;
}
.nav-pages {
padding-right: 0px;
}
.side-nav {
width: 500px;
}
Try This:
body {
height: 1200px;
}
.parent {
position: fixed;
background-color: red;
height: 100px;
width:100%;
}
.child1 {
background-color: green;
width: 100px;
height: 100px;
position: absolute;
left: 0;
}
.child2{
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
right: 0;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Something like this:
body {
width: 100%;
min-height: 1000px;
margin:0px;
padding:0px;
}
div {margin:0px;padding:0px;}
.wrapper {
border: 1px solid black;
width: 100%;
position: fixed;
height:50px;
top:0px;
}
.parent {
position: fixed;
width: 20%;
height: 50px;
background: red;
overflow:hidden;
top:1px;
right:40%;
}
.child1 {
position: fixed;
left: 20%;
top: 1px;
height: 50px;
width:20%;
background: green
}
.child2 {
position: fixed;
right: 20%;
top: 1px;
height: 50px;
width: 20%;
background: green
}
<body>
<div class="wrapper">
<div class="parent">parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</div>
</body>
I need to make something like this , how can I make the square on the middle between this two? Here is the CSS and Photo
My Css
#up{
width:100%;
height:30%;
}
#down{
width:100%;
height:70%;
}
#square{
width:40px;
height:40px;
}
Can I setting the square without counting the percentage of the location of the middle line? (because I want to add all something like this into all sessions of the web , and the height of the session will responsive by the text length
You need to use position relative to outer div and position relative to inner div
here is the link how can you do it
fiddle
.one,
.two,
.three {
width: 100%;
height: 50px;
}
.one {
background: yellow;
position: relative;
}
.two {
background: green;
}
.three {
background: red;
}
.square {
position: absolute;
bottom: -10px;
right: 30px;
height: 20px;
width: 20px;
background: white;
}
<div class="one">
<div class="square">
</div>
</div>
<div class="two">
</div>
<div class="three">
</div>
You can have a <div> square as:
<div id="div1"></div>
in CSS:
#div1{
border: 1px red;
height: /*enter the height */
width: /* enter the width */
position: relative;
left: /*enter the distance */
right: /*enter the distance */
top: /*enter the distance */
bottom: /*enter the distance */
z-index: 100 /* make sure other div's have z index lesser than this div's */
}
Put the square INTO the second div, give it a position: absolute and a top: -20px (and left: Xpx- i.e. whatever you need/want).
You can easily do this with position:absolute to your small box div.
Here is the solution that can help you
body,
html {
height: 100%;
margin:0px;
}
#up {
width: 100%;
height: 30%;
background: red;
}
#down {
width: 100%;
height: 70%;
background: blue;
}
#square {
width: 40px;
height: 40px;
background: green;
position: absolute;
top: calc(30% - 20px);
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 1;
}
<div id="up"></div>
<div id="down"></div>
<div id="square"></div>
I have read here in stackover flow and elsewhere that if we have a parent div with relative position, the child tags with absolute position will not relocate when zooming. But in my following example, it does not obey this rule.
In the main file, I have <img> tags instead of div with ids img1 to
img3
Any advice will be appreciated.
#container {
position: relative;
width: 200px;
height: 200px;
border: 3px solid green;
}
#img1 {
position: absolute;
width: 100px;
height: 100px;
background: red;
left: 25%;
}
#img2 {
position: absolute;
width: 20px;
height: 100px;
background: blue;
left: 30%;
}
#img3 {
position: absolute;
width: 20px;
height: 100px;
background: yellow;
left: 60%;
}
<div id="container">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</div>
In this example an inner green div is covered by a middle blue div, at least in Chrome, despite that it has a higher z-index. Why is it so and how to make it visible over the blue div? The green div must be inside an outer yellow div. From the top:
1. #inner
2. #middle
3. #outer
you could achieve that but you will need to move the #middle div inside #outer for the z-index to work
div {
position: absolute;
}
#outer {
width: 300px;
height: 100px;
top: 20px;
background: yellow;
}
#inner {
width: 240px;
height: 80px;
top: 10px;
left: 30px;
background: green;
z-index: 2;
}
#middle {
width: 280px;
height: 140px;
left: 10px;
z-index: 1;
background: blue;
top: -16px;
}
<div id="outer">
<div id="inner"></div>
<div id="middle"></div>
</div>
I need to position 3 objects as follows:
Div 1 is a absolute positioned container, with a fixed width, height and position.
Image 1 should be an absolute positioned image, with a fixed align left position only.
Div 2 should be an absolute positioned div, with a fixed align left position only.
I need Image 1 and Div 2 to align to the vertical center of div 1, as these are variable text and image elements with a dynamic height.
Example:
Div 1 is 200px high fixed.
Image 1 is 52px high variable
Image 1 should be vertically positoned:
(200 / 2) + (52 / 2) = 126px
I've looked into CSS table-cell, vertical-align, margin as % and others but was unable to get this working.
Thanks.
.div1
{
position: absolute;
width: 100px;
height: 100px
top: 100px;
left: 100px;
}
.image1
{
position: absolute;
left: 10px;
// something here to align the image in the vertical middle of div1
}
.div2
{
position: absolute;
left: 60px;
// something here to align the image in the vertical middle of div1
}
<div class="div1"><img class="image1"><div class="div2"></div></div>
Updated code:
<head>
<style type="text/css">
.div1 {
background: yellow;
display: table;
position: absolute;
width: 300px;
height: 300px;
top: 100px;
left: 100px;
}
.newdiv {
display: table-cell;
vertical-align: middle;
height: 300px;
}
.image1 {
left: 10px;
position: relative;
width:50px;
height: 80px;
background: blue;
}
.div2 {
position: relative;
background: red;
left: 70px;
width: 100%;
height: 200px;
}
</style>
</head>
<div class="div1"><div class="newdiv"><div class="image1" /></div><div class="div2">123</div></div></div>
Try this, you have to add another div inside your first div:
<head>
<style type="text/css">
.div1 {
background: yellow;
display: table;
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
}
.newdiv {
display: table-cell;
vertical-align: middle;
}
.image1 {
left: 10px;
position: relative;
}
.div2 {
position: relative;
background: red;
left: 6px;
}
</style>
</head>
<div class="div1"><div class="newdiv"><img class="image1" /><div class="div2">123</div></div></div>
UPDATE (I've found another way, without the new div, I didn't test it in IE.):
<head>
<style type="text/css">
.div1 {
background: yellow;
position: relative;
width: 300px;
height: 300px;
top: 100px;
left: 100px;
}
.image1 {
left: 10px;
position: absolute;
width:50px;
height: 80px;
background: blue;
top:0;
bottom:0;
margin:auto;
}
.div2 {
position: absolute;
background: red;
left: 70px;
width: 100px;
height: 200px;
top:0;
bottom:0;
margin:auto;
}
</style>
</head>
<div class="div1">
<div class="image1" /></div>
<div class="div2">123</div>
</div>
.image1,
.div2 {
position: absolute;
top:0;
bottom:0;
margin: auto;
}
jsFiddle