I will show you a simple example related to my task.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<html>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
</html>
As you can see in the above example, there are 2 fixed divs and there is 1 relative div in the first fixed div.
And I am going to show 1 absolute div in the relative div. but it is hidden by the second fixed div.
How to show the whole absolute div without any hidden part.
Just replace your blocks in HTML.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
z-index: 1000;
}
<html>
<div class="fixed2">
fixed1
</div>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
</html>
There are multiple ways of doing this
Move div.fixed1 below div.fixed2
(or)
You can increase the z-index of div.fixed1
.fixed1 {
z-index: 1;
}
Use the property z-index, so you will specify that div.fixed1 is in front of div.fixed2:
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
z-index: 1;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
Related
I am trying to put a div at the centre . Thats works well but it is not visible on the lower div. i.e the lower div hides the content of the center div. My html code :
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 2;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
Few things:
You don't have to use z-index for all the div's, if you want a specific div to be in front then just give z-index to that.
Since you already using div in your code, the div will sit beneath another be default and in your case layer-1 you want that to be in the front, so just use the z-index only for that and remove for others.
The higher the z-index value it display up-front.(in my code it is simple z-index:1`.)
.outerWrap {
position: relative;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
You got your z-index backwards. put layer1 at 2 and layer2 at 1
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 2;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 1;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
I have few divs like this:
<div id=1>
<div id=2></div>
<div id=3></div>
<div id=4>
<div id=5></div>
</div>
</div>
What I need is set up divs like this:
div 2 is on top left, div 3 is on top right, div 4 is at the bottom right and div5 at the top center of div 4
Problem is that I need to do it only in CSS and without class.
I'm not sure I understand your question, but I would do that:
<html>
<head>
<style>
#p1 {
height: 200%;
}
#p2 {
background-color: red;
width: 49%;
height: 48%;
position: fixed;
left: 0%;
top: 0%;
}
#p3 {
background-color: green;
width: 49%;
height: 48%;
position: fixed;
right: 0%;
top: 0%;
}
#p4 {
background-color: blue;
width: 100%;
height: 48%;
position: fixed;
right: 0%;
bottom: 0%;
}
#p5 {
position: absolute;
right: 50%;
top: 50%;
}
</style>
</head>
<body>
<div id=p1>
<div id=p2>2</div>
<div id=p3>3</div>
<div id=p4>4
<div id=p5>5<br>loren ipsum</div>
</div>
</div>
</body>
</html>
This is if you want the div fixed instead if you want div absolute you can try this:
<html>
<head>
<style>
#p1 {
height: 200%;
}
#p2 {
background-color: red;
width: 49%;
height: 48%;
position: absolute;
left: 0%;
top: 0%;
}
#p3 {
background-color: green;
width: 49%;
height: 48%;
position: absolute;
right: 0%;
top: 0%;
}
#p4 {
background-color: blue;
width: 100%;
height: 48%;
position: absolute;
right: 0%;
bottom: 0%;
}
#p5 {
position: absolute;
right: 50%;
top: 50%;
}
</style>
</head>
<body>
<div id=p1>
<div id=p2>2</div>
<div id=p3>3</div>
<div id=p4>4
<div id=p5>5<br>loren ipsum</div>
</div>
</div>
</body>
</html>
You can use:
#d1 {
position: relative;
height: 100px;
width: 100px;
}
#d2 {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
background-color: red;
}
#d3 {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: blue;
}
#d4 {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
background-color: green;
}
#d5 {
position: absolute;
top: 0;
width: 25px;
height: 25px;
left: 0;
right: 0;
margin: 0 auto;
background-color: yellow;
}
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4">
<div id="d5"></div>
</div>
</div>
I have a cloud made with HTML/CSS and I'm trying to include some text in the center of it. But I'm having trouble positioning it and having it overlap over the cloud divs.
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
.text {
overflow: hidden;
position: absolute;
z-index: -2;
}
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c">
<p class="text">
this is some text
</p>
</div>
<div id="left_c">
</div>
</div>
Not entirely sure how to make it work, I thought the z-index would allow the text to take "priority" and show first, but it doesn't seem to be working. Do I need to insert the p tags inside another div? Any suggestions would be appreciated!
Remove the text element from its current nesting level. Just make it a sibling of the border divs. Still one overall container.
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
.text {
position: absolute;
top: 40px;
left: 135px;
z-index: 2;
}
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
<p class="text">this is some text</p>
</div>
If you change your html to:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
<p class="text">
this is some text
</p>
and the text element in css to:
.text {
overflow: hidden;
position: absolute;
z-index: 2;
top:200px;
right:200px;
}
then it works.
I am trying to make nested divs, so I can position children with top and left, so they can overlap each other:
https://jsfiddle.net/e0cpuarv/
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
It works with one huge drawback - children just are on the top of parent. What should I do to make them be inside parent, like this?
desiredresult
In fact, children may be not DIVs, IMGs will be enough too, if this helps
try this one:
body{margin:0px;padding:0px;}
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 40px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 30px;
background-color: blue;
}
DEMO HERE
Change this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
to this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
overflow: hidden;
}
Here is the JSFiddle demo
Basically you add overflow:hidden to the parent element .boo :)
just make the main div (.boo) position: relative
see the code, and change the left and top values for kah1 and kah2 to position the inner boxes
.boo {
position: relative;
margin-left: 10px;
margin-top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 25px;
top: 12px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
right: 25px;
top: 12px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
You can hide the overwflow with overflow: hidden, so in your case the css would be like this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
overflow: hidden;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
Is it possible to position child element (C) under its parent (B), and above B's neighbor (C)?
It's a little bit difficult to describe, you can watch example here.
The question is to position blue div.inner above red div.neighbor AND under green div.outer.
To illustrate:
HTML code:
<div class="neighbor"> </div>
<div class="outer">
<div class="inner"></div>
</div>
CSS code:
.neighbor{
background-color: red;
height: 500px;
width: 500px;
}
.outer{
background-color: green;
width: 300px;
height: 300px;
position: fixed;
top: 0px;
left: 0px;
}
.inner{
background-color: blue;
width: 100px;
height: 100px;
position: fixed;
top: 0px;
left:250px;
}
JsFiddle
HTML:
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
CSS:
.red {
background-color: red;
height: 500px;
width: 500px;
z-index: 1;
}
.green {
background-color: green;
width: 300px;
height: 300px;
position: fixed;
top: 0px;
left: 0px;
z-index: 3;
}
.blue {
background-color: blue;
width: 100px;
height: 100px;
position: fixed;
top: 0px;
left: 250px;
z-index: 2;
}
.neighboor {
background-color: red;
height: 500px;
width: 500px;
position:fixed;
z-index:-200;
}
.outer {
background-color: green;
width: 300px;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
}
.inner {
background-color: blue;
width: 100px;
height: 100px;
position:relative;
z-index: -100;
top: 0px;
left: 250px;
}