I'm trying to create this type of an overlapping by using z-index on divs:
However, if I set the z-index of the parent to a smaller number than z-index of the "non-child" element, the child stays at the back with it's parent too.
I'm wondering if there is any way to overcome this issue..
Are you trying to do something like this ?
http://codepen.io/mudittuli/full/rEgkw
It's hard to tell without seeing your code, but I believe you are using some of the DIVs as ancestors; try to use all of them separately. That example does what you want:
<!DOCTYPE html>
<html>
<head>
<title>Positioning test</title>
<style>
div { position: absolute; width: 100px; height: 100px; color: #fff; text-align: center; }
#parent { z-index: 1; background-color: red; left: 100px; top: 20px; }
#not-child { z-index: 2; background-color: green; left: 140px; top: 40px; }
#child { z-index: 3; background-color: blue; left: 70px; top: 60px; }
</style>
</head>
<body>
<div id="parent">Parent</div>
<div id="not-child">Not-child</div>
<div id="child">Child</div>
</body>
</html>
Related
Just started coding CSS and having issues with a element (class is "strip") that seems to be invisible when I compile my code. If I set the position of the element to 'absolute' it seems to appear, however I need it to appear using 'relative' and this does not seem to be working.
The class of the div I am referring to is "strip", which at this point should appear as a red block in front of all other elements.
I've tried messing around with the z-index, but this hasn't seemed to change anything.
CSS:
.banner {
z-index: 2;
position: relative;
height: 56px;
width: 100%;
background-color: #F8F8F8;
margin: 0;
border-bottom-width: 1px;
border-bottom-color: #C6C6C6;
border-bottom-style: solid;
}
.header {
position: relative;
z-index: 3;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
font-family: "Titillium Web Regular", sans-serif;
text-transform: uppercase;
font-size: 12px;
bottom: 58px;
}
.logo img {
position: relative;
z-index: 4;
height: 50px;
width: 44px;
left: 3px;
bottom: 114px;
}
.strip {
position: relative;
bottom: 200px;
height: 100%;
width: 50%;
background-color: red;
z-index: 5;
}
body {
background-color: #d1e1ff;
margin: 0;
}
HTML:
<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<div class = banner>
</div>
<div class = header>
<h1>club quiz<h1>
</div>
<div class = logo>
<img src = "https://myuwastudentguild.com/wp-content/uploads/2015/02/UWA_Student_Guild_Corpo15A_Black.png"/>
</div>
<div class = strip>
</div>
</body>
At this point, the in the "strip" class should be appearing as a red block in front of all other elements, however it is instead invisible.
Current Layout
Desired Layout
Basically I'm just looking to add a panel that runs down the centre of the page
Next to what Thanveer suggested
What exactly happening is - when you have
position:absolute; height:100%
it will occupy 100% of the screen and then you said bottom:200px so it will push this div from (0,0)(as it was absolute with respect to you body) to (0, -200). when you want this element to have
position:relative; height:100%
it will occupy the 100% of the parent element, which is body in your case that doesn't have any height.
So solution is either define some fixed height on body
body
{
background-color: #d1e1ff;
margin: 0;
height:500px;
}
OR
create parent wrapper on .strip and assign some height on that wrapper.
...
...
<div style="height:100px">
<div class="strip"></div>
</div>
...
...
Remember as you are trying to use position:relative;bottom: 200px;. it will be the real position of the .strip element (x,y) and then it will be push upward by 200 px to position will be (x, y-200).
Check the Fiddle
Hope it helps.
Use a fix height on class strip:
.banner {
z-index: 2;
position: relative;
height: 56px;
width: 100%;
background-color: #F8F8F8;
margin: 0;
border-bottom-width: 1px;
border-bottom-color: #C6C6C6;
border-bottom-style: solid;
}
.header {
position: relative;
z-index: 3;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
font-family: "Titillium Web Regular", sans-serif;
text-transform: uppercase;
font-size: 12px;
bottom: 58px;
}
.logo img {
position: relative;
z-index: 4;
height: 50px;
width: 44px;
left: 3px;
bottom: 114px;
}
.strip {
position: relative;
bottom: 200px;
height: 100px;
width: 50%;
background-color: red;
z-index: 5;
}
body {
background-color: #d1e1ff;
margin: 0;
}
<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<div class = banner>
</div>
<div class = header>
<h1>club quiz<h1>
</div>
<div class = logo>
<img src = "https://myuwastudentguild.com/wp-content/uploads/2015/02/UWA_Student_Guild_Corpo15A_Black.png"/>
</div>
<div class = strip>
</div>
</body>
If you just want it to see using relative then all you have to do is give a fixed height inside your css
.strip {
height:200px;
}
And you have used a lot of position:relative in your code which is not necessary. So please check out how positioning in CSS works. That could make things much easier for you.
I am CSS beginner, want to create simple box and put another box exacly center of first box,
tried something like this
#first {
width: 100px;
height: 100px;
background: red;
}
#first #second{
width: 50%;
height: 50%;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOX-EXAMPLE</title>
</head>
<body>
<div id="first">
<div id="second"></div>
</div>
</body>
</html>
but not as expected.
#first {
width: 100px;
height: 100px;
background: red;
overflow: hidden;
}
#first #second{
position: relative;
width: 50%;
height: 50%;
margin: auto;
margin-top: 25%;
background: green;
}
Fiddle
Problem:
The issue you are having is that by default, your child elements align themselves to the top left of their parent element, and not in the center as you are expecting. In order to position your child element in the center (horizontally), you could use the css of:
margin: 0 auto;
which will place it horizontally in the middle.
Vertically aligning is slightly more difficult, as it involves ensuring it to be the correct from both top and bottom of your parent, so you could use:
top: 25%;
However, this should really only be used if your child is positioned in accordance to your parent div, and so we need to include position:absolute; into our child element.
However, if we do this, then it would be more beneficial to set it using both left and top properties, like so (in our child element):
position: absolute;
left:25%;
top:25%;
So, using this we come to our first solution:
Solution 1: Using positioning
By using absolute positioning, and making your parent have relative positioning, this will solve your problem.
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#first #second {
position: absolute;
width: 50%;
height: 50%;
background: green;
left: 25%;
top: 25%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOX-EXAMPLE</title>
</head>
<body>
<div id="first">
<div id="second"></div>
</div>
</body>
</html>
Solution 2: Pseudo Effects
You may also want to use pseudo effects to reduce your markup (makes the page load slightly faster), and so we could use pseudo effects to a great beneficial degree (since we only use a single element instead of two):
This is shown below:
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#first:after {
content:"";
width: 50%;
height: 50%;
background: green;
position: absolute;
left:25%;
top:25%;
}
<div id="first"></div>
One way is to use auto margin with absolute positioning:
#first #second {
width: 50%;
height: 50%;
position: absolute;
margin: auto;
background: green;
top :0; left: 0; right: 0; bottom: 0;
}
Demo: http://jsfiddle.net/gzterxrd/
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#first #second {
width: 50%;
height: 50%;
background: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="first">
<div id="second"></div>
</div>
Or you can also use border
#first {
width: 50px;
height: 50px;
background: green;
position: relative;
border:15px solid red;
}
<div id="first"></div>
or you can also use pseudo element
#first {
width: 50px;
height: 50px;
background: green;
position: relative;
margin:50px;
}
#first:after{
content:'';
background: red;
position:absolute;
top:-20px;
left:-20px;
right:-20px;
bottom:-20px;
z-index:-1;
}
<div id="first">
</div>
You can do something like this
#second {
width: 60px;
margin: auto;
background-color: green;
}
So, not an html genius here. I'm trying to place elements precisely over a fixed background image (so zoom does not alter element relation to background). Finally got it working by setting the elements to fixed 100% and specifying position offsets, only to realize a problem with this approach. The two anchors in this code snippet are in the right place on the same line, but because they are both width 100% to get them fixed relative to the background, only the second anchor is actually clickable. So, if you click the telephone number OR the email address, it just launches the mailto. Both anchors are occupying the same space, so I assume I need to solve this overlap problem and have them take only the space they occupy...but I'm pulling my hair out on the spacing. Thanks!
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body id="container">
<div id="content">
<a id="ContactInfo" style="top: 170px; left: -20px;" href="tel:800-555-1212">800-555-1212</a>
<div id="ContactCaret">
<img style="width:18px" src="images/double carrots.png"/>
</div>
<a id="ContactInfo" style="top: 170px; left: 280px;" href="mailto:sample#myDomain.com">sample#myDomain.com</a>
<div>
</body>
</html>
css:
#container{
position: fixed;
background: url(images/myBackground.jpg);
background-repeat:no-repeat;
background-position: center 0px;
font-family: Verdana;
width: 100%;
height: 100%;
}
#content{
position: fixed;
width: 100%;
height: 100%;
}
#ContactCaret{
position:fixed;
text-align: center;
width:100%;
top:172px;
left:92px;
}
#ContactInfo{
color: #f69f38;
text-align: center;
position:fixed;
width:100%;
font-size: 140%;
font-weight:bold;
text-decoration: none;
}
I wonder if something like THIS fiddle might help.
Convert the anchors to block.
Style them.
Position them absolute.
HTML
<div id="container">
<a id="ContactInfo" href="">800-555-1212</a>
<a id="ContactInfo2" href="">sample#myDomain.com</a>
<div>
CSS
#container {
position: relative;
background-color: white;
width: 100%;
height: 150px;
border: 1px solid black;
}
#ContactInfo {
display: block;
height: 30px;
background-color: red;
position: absolute;
top: 30px;
left: 100px;
color: white;
}
#ContactInfo2 {
display: block;
height: 30px;
background-color: blue;
position: absolute;
top: 30px;
left: 250px;
color: white;}
When I zoomed the browser, the date and apa div went outside the container div. How to keep the date/apa div still inside the container even when zoomed? Sorry for asking simple question. Just a beginner.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="testeffect.css"/>
</head>
<body>
<div id="header">
<div id="container">
<div id="date">
<p>18 Jamadilawal 1434H<br> Saturday, 30th March 2013<br><p>
</div>
<div id="apa">
<p>18 Jamadilawal 1434H<br> Saturday, 30th March 2013<br><p>
</div>
</div>
</div>
</body>
</html>
*{margin: 0 auto;}
#header{
height: 50px;
width: 100%;
background-color: black;
}
p{
font-family: Garamond;
font-size: 18px;
color: white;
}
#container{
height: 50px;
width: 800px;
position: absolute;
left: 20%
}
#apa{
position: absolute;
left: 200px;
width: 200px;
height: 50px;
background-color: brown;
left: 420px;
}
#date{
position: absolute;
left: 200px;
width: 200px;
height: 50px;
background-color: brown;
}
http://jsfiddle.net/zWpM9/
most of the times, absolute positioning causes that. try not using absolute positioning
#header{
height: 50px;
width: 100%;
background-color: black;
}
can't inherit the width based off the parent if the parent also not set, try
body {
width: 100%;
}
also get rid of that * { margin: auto; } and only add it to things that MUST be centered.
Additional issues, you are using #header { width: 100%; } and then #content { width: 800px; } which is a poor idea. If header is smaller than 800px, what will content do? act strangely, and unexpectedly. So, please don't do this. Either specify all with percents or NONE (it will be easier for you as a beginner).
here is my fiddle, GUESSING what you might have wanted to do. It scales with zoom correctly, and uses no percentages.
http://jsfiddle.net/QgH99/
I would like the settingsBox element to float over the canvas rather than below it. What can I change in my style sheet to achieve the intended result?
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
margin: 0px;
}
#fullCanvas {
width: 100%;
height: 100%;
background-color: blue;
z-index: 0;
}
#settingsBox {
width: 400px;
height: 400px;
z-index: 1;
border: 2px solid black;
background-color: lightgrey;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
</style>
<script>
function hideSettings() {
document.getElementById('settingsBox').style.visibility = 'hidden';
}
</script>
</head>
<body align="center">
<canvas id="fullCanvas">
This site requires html5 etc
</canvas>
<div id="settingsBox" onclick="hideSettings()">
Settings go in here. Click to hide
</div>
</body>
</html>
First, you have a little spelling mistake, you wrote position: abolute for your fullCanvas element, it should be:
#fullCanvas {
position: absolute;
// your other styles
}
and in order for z-index to work you have to set the position of the respective elements to absolute, fixed or relative, that means you will have to set your settingsBox to position: relative like this:
#settingsBox {
position: relative;
// your other styles
}
apart from that you're code looks good to me