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>
Related
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>
Can i used relative
2 times in my css code
This is possible or is it a mistake
here is my code :
Thanks for any help
My CSS
#box1 {
width: 800px;
height: 600px;
background-color: #FF0004;
margin-right: auto;
margin-left: auto;
position: relative;
}
#box2 {
width: 380px;
height: 256px;
background-color: #A9FF00;
position: relative;
left: 7px;
top: 10px;
}
#box3 {
width: 190px;
height: 155px;
background-color: orange;
position: absolute;
left: 13px;
top: 15px;
}
My HTML
<div id="box1"><div id="box2"><div id="box3"></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.
How to create the curve that you see in picture with CSS and HTML?
Can I use CSS border radius or use other solution?
You could do it with two divs and psuedo elements :before and :after. Working code below
.top-bar{
height: 100px;
width: 100%;
background-color: #55c3ff;
}
.curved-bottom{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #55c3ff;
border-radius: 0 0 20px 20px;
position: relative;
}
.curved-bottom:before {
height: 50px;
width: 16%;
background-color: white;
border-top-right-radius: 10px;
left: -16%;
content: '';
position: absolute;
top: -8px;
}
.curved-bottom:after {
height: 50px;
width: 16%;
background-color: white;
border-top-left-radius: 10px;
right: -16%;
content: '';
position: absolute;
top: -8px;
}
<div class="top-bar"></div>
<div class="curved-bottom"></div>
If your main horizontal blue bar is a div, and the box sticking down is a separate div, you can use the pseudo elements :before and :after to create those inner radius.
See the following as an example:
html,
body {
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: #5DC4FD;
width: 100%;
height: 160px;
}
.tab {
position: relative;
top: 130px;
background-color: #5DC4FD;
width: 80%;
height: 100px;
margin: 0 auto;
border-radius: 0 0 30px 30px;
}
.tab:before {
position: absolute;
content: "";
left: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 0 30px 0 0;
}
.tab:after {
position: absolute;
content: "";
right: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 30px 0 0 0;
}
<div class="header">
<div class="tab">
</div>
</div>
Well, you could use overlapping divs like this:
#top {
background: #00BFFF;
width: 100%;
height: 150px;
}
#container{
display: flex;
}
#mid{
background: #00BFFF;
width: 70%;
height: 50px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#left{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-right-radius: 25px;
}
#right{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-left-radius: 25px;
}
<div id="top"></div>
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
but I'd recommend using a background image with the desired shape
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/