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>
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>
As the title says, and as my screenshots show, my images and text move whenever I browse the website using a smaller browser-window. I have tried to search around the web for similar problems but found nothing really helpful.
.top-container {
background-color: #51555c;
position: relative;
padding-top: 100px;
color: white;
padding-bottom: 70px;
}
.top-cloud {
position: absolute;
right: 340px;
top: 40px;
width: 10%;
height: auto;
}
.sun {
position: absolute;
right: 60px;
top: 80px;
width: 10%;
height: auto;
}
.bottom-cloud {
position: absolute;
left: 200px;
bottom: 650px;
width: 15%;
height: auto;
}
.paper-plane {
position: absolute;
left: 120px;
bottom: 400px;
width: 15%;
height: auto;
}
Pictures of the problem
The yellow dot "gif1" has to go inside the black box "gif" but as you can see I somehow managed to did the opposite.
How many things did I do wrong?
Livewave Preview
I already tried overflow:auto or hidden and changing the position attributes from relative to absolute and vice versa.
<html>
<head>
<body>
<center>
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
</center>
<style>
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: relative;
float: left;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
</style>
</head>
</body>
</html>
You are facing a complex situation where the float property is creating the issue. Basically the yellow "image" is wrapping around the floated element and that's why it goes out of the black box and under the blue one (the float element). To avoid this you can use absolute instead of float.
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
margin: auto;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: absolute;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
This is the way to go:
.gif{
position: relative;
}
.gif1{
position:absolute;
}
Hope it helps.
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>
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/