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>
Related
Hello! I would like to accomplish this with a circle div. I know how to accomplish positioning with absolute and relative in 1 div, but if i want to make this out of two divs and make the circle overlapping these two divs is there any easy/smart way to go in CSS?
Hope it helps
body {
margin: 0px;
}
.top,
.bottom {
width: 100%;
height: 100px;
}
.top {
background: red;
}
.bottom {
background: black;
}
.circle {
background: green;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: 50px;
left: 50vh;
}
<div class="top"></div>
<div class="bottom"></div>
<div class="circle"></div>
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 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/
I have one div with overflow: scroll and a lot of text. Then second div inside with position: absolute and 100% height and width. Is it possible to do, when you scroll down, inside div also moves down so it always covers whole visible view of outer div, with only css or I'll need to use javascript?
Here's an example in which you can see, that scrolling down, inside div is left at the top.
CSS:
.test1 {
position: relative;
height: 200px;
width: 500px;
overflow: scroll;
background: green;
}
.test2 {
position: absolute;
opacity: 0.5;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: red;
}
HTML:
<div class="test1">
<div class="test2"></div>
Lot of text
</div>
is this what you want? Demo
.test1 {
position: relative;
height: 200px;
width: 500px;
overflow: scroll;
background: green;
}
.test2 {
position: fixed;
opacity: 0.5;
height: 185px;
width: 485px;
background: red;
}
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