I have the following:
http://jsfiddle.net/L86xV/
The main excerpts are:
HTML
<div id="wrapper">
<div id="innerwrapper">
<div id="nav">
<div id="about" class="menu1">About</div>
<div id="aboutsub">
<div id="team" class="menu2">Team</div>
<div id="experience" class="menu2">Experience</div>
<div id="difference" class="menu2">Difference</div>
</div>
<div id="work" class="menu1">Work</div>
<div id="portfolio" class="menu1">Portfolio</div>
<div id="contact" class="menu1">Contact</div>
</div>
<div id="outerviewer">
<div id="innerviewer">This is where the main text goes.</div>
</div>
</div>
</div>
CSS
#outerviewer {
float: right;
width: 576px;
height: 700px;
background: #63c5ff;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
z-index: 100;
}
#innerviewer {
width: 506px;
height: 630px;
background: white;
position: relative;
top: 5px;
left: 10px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
outline: 0px solid black;
padding: 25px;
}
.menu2 {
position: absolute;
background-image:url('../img/BTF_Tab_Sub.png');
background: purple;
width: 80px;
height: 42px;
left: 100px;
cursor: pointer;
}
It was my hope that the items with the class menu2 would act like those with menu1 and change cursor to the pointer. However, they don't, and adding javascript to the buttons returns no events.
I've tried messing with z-index to no avail, can anyone suggest why the menu2 items aren't clickable and how I can fix it?
Re: position:relative;, the z-index is only applied to positioned elements (relative, absolute or fixed).
The w3 wiki makes a note that z-index
• Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).
And the w3 CSS2 spec states that z-index
Applies to: positioned elements
It seems I had to set
#outerviewer
{
position: relative;
}
I don't know why, but if someone explains it well enough, I will give them the tick to help others know why.
Updated fiddle
You had a negative z-index on the sub-menu.
My changes:
#about {
z-index:0;
}
#aboutsub {
z-index: 1;
}
#innerviewer {
z-index:10;
}
When I take out z-index: -1 in the aboutsub div, the desired cursor shows on the purple submenu.
Related
I'm wondering the best approach for creating an overlapping navigation. I guess the easiest way is just to position it absolutely relative to the containing div? Any thoughts on an easy way to position this would be great!
I'm currently considering using a bootstrap button group for the "nav".
This is possible with minimal pure css, and without position absolute.
In order to keep your nav centered, I would recommend some markup along the lines of below (a wrapper around your nav to let you center it up).
Note that I understand you intend to use bootstrap, and you will absolutely be able to do that with what you are trying to accomplish. The below is just pseudo-code to get you the key elements / working example of how this could be accomplished.
jsFiddle
Basic markup:
<div class="nav">
<nav class="buttons">
Button 1
Button 2
Button 3
</nav>
</div>
<div class="content">
Borderered content area.
</div>
Demonstrative CSS:
div.nav {
text-align: center;
z-index: 2;
padding-top: 1px;
}
nav {
display:inline-block;
margin:0 auto;
background: white;
}
nav a {
display: inline-block;
padding: 5px 10px;
border: 1px solid black;
}
div.content {
margin-top: -15px;
z-index: 1;
border: 2px solid red;
min-height: 300px;
}
Note
With this markup, you will end up with about 4px of space between the <a> elements due to the whitespace. See this article: Fighting the Space Between Elements.
My typical solution is to move the elements onto the same line. Not quite as readable, but gets the job done, and doesn't require any other "funky" solutions:
<nav class="buttons">
Button 1Button 2Button 3
</nav>
.header {
background-color: blue;
width: 100%;
height: 200px;
margin-top: 25px;
}
.nav {
position: absolute;
left: 50%;
top: 0;
}
.nav div {
position: relative;
left: -50%;
background-color: yellow;
width: 400px;
height: 50px;
}
<body>
<div class="nav">
<div>
</div>
</div>
<div class="header">
</div>
</body>
or you can go with just one div in the nav bar putting left: 25%
Cant figure out why my div is not in the bottom right corner of my row.
<div class="row">
<div id="col-xs-4">
<p>pplplplplp</p>
</div>
<div id="col-md-8 pull-right">
<p>pplplplplp</p>
</div>
<div id="bottomrightcontainer">
<p>pplplplplp</p>
</div>
</div>
#bottomrightcontainer{
background-color: white;
border: 2px solid white;
border-radius: 2px;
z-index: 1;
position: absolute;
width: 17%;
height: 29%;
right: 0px;
bottom: 0px;
}
This places it to the bottom of the window not the row that is its parent.
position: absolute; as you want it to work needs the parent to be position: relative;
http://jsfiddle.net/5uodkb1u/
.row {
position: relative;
}
You were just missing position:relative;
This is because absolute is based on the closest relative parent. If no parents are relative, then absolute is based on the browser window.
HTML
<div class="row">
<div id="left">
<p>pplplplplp</p>
</div>
<div id="right">
<p>pplplplplp</p>
</div>
<div id="bottomrightcontainer">
<p>pplplplplp</p>
</div>
</div>
CSS
#bottomrightcontainer{
background-color: blue;
border: 2px solid red;
border-radius: 2px;
z-index: 1;
position: absolute;
width: 17%;
height: 29%;
right: 0px;
bottom: 0px;
}
.row{
border: 2px solid green;
position:relative;
}
http://jsfiddle.net/cg8bgvoz/
Adding position: relative to the parent div should work:
JSFiddle: http://jsfiddle.net/ABr/Lxwqkvav/
In the code above bottomrightcontainer is a direct child of the body. It would be at the bottom-right of the body. Then also make it's position relative instead of absolute
You haven't specified css for class row, which is your parent class. So, try to add
.row
{
position: relative;
}
You can do this with html, and css . No javascript required, also no jquery and other complex language required for completing the job .
See here: http://goo.gl/PnWvUl
I am trying to set a div at the right side, superimposed to a video tag element which has a poster attribute but for any reason, when I set the property right: 0 to align it at the right side, it is aligned to the right side of the document.
<div class="screen-container">
<div id="delete"></div>
<video id="preview"></video>
</div>
#screen-container{
width: 515px;
height: 600.23px;
}
#delete {
width: 40px;
height: 40px;
background-color: white;
background-size: 500px;
background-position: -97px -75px;
margin: 10px 10px;
cursor: pointer;
position: fixed;
z-index: 1;
}
#preview{
width: 100%;
height: 100%;
}
I have also tested to put the <div id="delete> inside the <video> but the <div> element wasn't vissible.
<div class="screen-container">
<video id="preview">
<div id="delete"></div>
</video>
</div>
Any idea of what is happening?
Thanks in advice
fixed positioning removes the element from the flow of the document and can not be contained within a parent. Use position: absolute instead and set the parent .screen-container to position: relative.
Following the answer of jmore009, I had a problem with elements that were comming behind.
To solve that other case, I just added did what I show at the code below:
<div class="screen-container">
<div id="delete"></div>
<video id="preview"></video>
</div>
<div class="screen-aux"></div>
.screen-container{
position: absolute;
}
#delete{
width: 40px;
height: 40px;
background-color: white;
background-size: 500px;
background-position: -97px -75px;
margin: 10px 10px;
cursor: pointer;
position: absolute;
z-index: 1;
right: 0;
}
That allows me to add vissible elements behind by keep using position relative.
Thanks!
I'm having trouble floating a div over an image. Here is what I am trying to accomplish:
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
}
.tag {
float: left;
position: relative;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
<div class="container">
<div class="tag">Featured</div>
<img src="http://www.placehold.it/200x200">
</div>
In this image:
I want the "Featured" box to float over top of the image but instead it seems to "clear" the float and cause the image to wrap to the next line, as though it was displaying as a block element. Unfortunately, I can't figure out what I am doing wrong. Any ideas?
Never fails, once I post the question to SO, I get some enlightening "aha" moment and figure it out. The solution:
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position: relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
<div class="container">
<div class="tag">Featured</div>
<img src="http://www.placehold.it/200x200">
</div>
The key is the container has to be positioned relative and the tag positioned absolute.
Change your positioning a bit:
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position:relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
background-color: green;
}
jsFiddle example
You need to set relative positioning on the container and then absolute on the inner tag div. The inner tag's absolute positioning will be with respect to the outer relatively positioned div. You don't even need the z-index rule on the tag div.
Actually just adding margin-bottom: -20px; to the tag class fixed it right up.
http://jsfiddle.net/dChUR/7/
Being block elements, div's naturally have defined borders that they try not to violate. To get them to layer for images, which have no content beside the image because they have no closing tag, you just have to force them to do what they do not want to do, like violate their natural boundaries.
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
}
.tag {
float: left;
position: relative;
left: 0px;
top: 0px;
background-color: green;
z-index: 1000;
margin-bottom: -20px;
}
Another toue to take would be to create div's using an image as the background, and then place content where ever you like.
<div id="imgContainer" style="
background-image: url("foo.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-mox-background-size: cover;
-o-background-size: cover;">
<div id="theTag">BLAH BLAH BLAH</div>
</div>
You've got the right idea. Looks to me like you just need to change .tag's position:relative to position:absolute, and add position:relative to .container.
You can achieve this with relative position.
But why isn't your code working?
An element with position:relative keeps it's position and also still affects all other following elements. That's the reason why your div won't overlap the image by just using z-index.
You'll still need to position the div element with, for example: top:-28px where the amount would be the height of the element with tag class.
Note: top has no effect on non-positioned elements. It works with absolute, relative and sticky.
If you add top:-28px to the tag element it will only overlap the image if the z-index it has a higher number. This is the importance of z-index in this case.
.container {
width: 200px;
height: 200px;
}
.tag {
position: relative;
z-index: 1;
float: left;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
background-color: #92AD40;
}
img{
position:relative;
z-index:0;
top:-28px;
}
<div class="container">
<div id='tag' class="tag">Featured</div>
<img id='img' src="https://i.stack.imgur.com/rUDax.png">
</div>
If you want to play a bit with this concepts
I added some JS code to toggle between different styles
const tag = document.getElementById('tag')
const img = document.getElementById('img')
const label1 = document.getElementById('label1')
const label2 = document.getElementById('label2')
function togglePosition(){
if(!tag.style.position){
tag.style.position = 'relative'
img.style.position = 'relative'
label1.innerHTML = 'Relative position added'
}
else{
tag.style.position = null
img.style.position = null
label1.innerHTML = 'Add relative position'
}
}
function toggleZindex(){
if(!tag.style.zIndex){
tag.style.zIndex = '1'
img.style.zIndex = '0'
label2.innerHTML = 'z-index (1 and 0) added to elements'
}
else{
tag.style.zIndex = null
img.style.zIndex = null
label2.innerHTML = 'Add z-index to elements'
}
}
.container {
margin-top:20px;
width: 200px;
height: 200px;
}
.tag {
float: left;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
background-color: #92AD40;
}
img{
top:-28px;
}
<input type='checkbox' onclick='togglePosition()'/>
<label id='label1'>Add relative position</label>
<br/>
<input type='checkbox' onclick='toggleZindex()'/>
<label id='label2'>Add z-index to elements</label>
<div class="container">
<div id='tag' class="tag">Featured</div>
<img id='img' src="https://i.stack.imgur.com/rUDax.png">
</div>
you might consider using the Relative and Absolute positining.
`.container {
position: relative;
}
.tag {
position: absolute;
}`
I have tested it there, also if you want it to change its position use this as its margin:
top: 20px;
left: 10px;
It will place it 20 pixels from top and 10 pixels from left; but leave this one if not necessary.
I am developing a webpage and I am having problems with z-index not working as expected. My structure looks like this:
<div class="mainWrapper">
<div class="overlay"></div>
<div class="main">
<div class="content1">
content goes here
</div>
</div>
</div>
In overlay, I have a picture that should be above the main-class, but under the content-class. I've tried simply adding different z-indexes, but it does not seems to work. How can I solve this problem? Does this happen because the overlay-div is outside the other divs?
<style>
.mainWrapper{ position:relative; }
.overlay{ position:absolute; }
.main{ position:absolute; }
.content1{ position:absolute; }
</style>
<div class="mainWrapper">
<div class="main"></div>
<div class="overlay"></div>
<div class="content1">
content goes here
</div>
</div>
With absolute positioning, Items will get layered in the order they added to the page. So here, main will be the bottom layer, then overlay on top of that, then content1 above that.
Hard to tell what is happening without seeing the CSS, but...
In order for z-index to work properly, all of the elements you are working with need to be given an explicit position.
Some info:
http://reference.sitepoint.com/css/z-index
http://reference.sitepoint.com/css/stacking
It works with right css like this:
.overlay {
height: 300px;
width: 200px;
background-color: blue;
position: absolute;
top: 0px;
left: 0px;
z-index: 3;}
.main{
height: 250px;
width: 150px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;}
.content1{
height: 200px;
width: 100px;
background-color: yellow;
position: absolute;
top: 0px;
left: 0px;}
.mainWrapper{
position: absolute;
}
example HERE