I am trying to get a div, which is a child of #map-canvas, in front of the map.
At first, I changed the name of the parent to #maps-canvas, so the map wouldn't appear anymore.
I changed different CSS parameters and it worked perfectly. Then I changed the div back to #map-canvas (I also changed the id in my CSS file), so the map would appear again.
Interestingly, the child div disappeared. Then I added a z-index (child: 100, parent: 1), but still no change.
Here's the code:
HTML <div id="map-canvas">
<div id="TEXT13"></div>
</div>
CSS #map-canvas
width:100%;
height:93%;
top:7%;
z-index:1;
CSS #TEXT13
top: 70%;
left:40%;
height: 30%;
width: 20%;
background-color: blue;
border: 1px solid black;
position:relative;
z-index: 900;
Am I doing something wrong or is the Google-code preventing the div to be in front of the map?
"You cannot place elements inside a canvas (and have both displayed); they are only displayed if the browser does not understand the canvas element."
Placing a <div> within a <canvas>
You'd have to implement something like Andys answer to get the same effect. (Absolute positioning)
I would suggest that instead of putting the element inside #map-canvas as a child, you put it before #map-canvas as an absolute positioned element. Then set the z-index above the #map-canvas. This will allow it to act as an overlay on top of the map.
Css example:
#something_you_want_on_top_of_map {
width: 300px; /* set to same size as map */
height: 300px;
position: absolute;
z-index: 100;
}
Html example:
<div id="something_you_want_on_top_of_map">content...</div>
<div id="map-canvas"></div>
Hope that helps!
Related
I have a simple question over CSS's relative-absolute relationship.
Here's simple example.
HTML:
<div class="relative">
relative area
<div class="absolute">I am relative area's son. Hover over me! my bg-color changes!</div>
</div>
CSS:
.absolute {
width: 140px;
height: 140px;
background-color:tomato;
position: absolute;
left: 120%;
top: 0;
}
.relative {
position: relative;
border: 2px solid #000;
width: 200px;
height: 200px;
margin-top: 200px;
}
.relative:hover .absolute {
background-color: yellowgreen;
}
https://codepen.io/nori2tae/pen/ZXgMjZ
When I hover over .absolute its background color changes.
This shows that though it is visually detached from parent area(.relative), as long as a child element(.absolute) semantically belongs to its parent, browser thinks mouse pointer is also on .absolute, right?
Therefore hover over .absolute also means .relative:hover?
And is this so called hoisting?
Someone pls clear the fog over my head.
It might be "visually" detached but to the browser DOM parser still sees your page a bunch of HTML tag. Since the CSS did not change the DOM model the Browser still thinks the absolutely positioned element is still inside its parent element.
Now since browser is responsible for handle such mouse events you get the mentioned behavior.
Its called trickling or capturing.. (different terms for the same thing)
Hoisting is a different concept in javascript (Eg. function and variable declarations are moved to the top during compilation
.relative:hover .absolute {
background-color: yellowgreen;
}
I understand your css like so: When hover on .relative, make its child .absolute change background. And it does just that (because .absolute is the child of .relative). I don't see what's wrong here?
The reason you hover over .absolute and still get the background change is because in fact you're hovering over .relative.
I am trying to have a header div inherit it's width from it's parent.
The header div is position fixed.
However, as you can see in the simple PLNKR i've created here:
http://plnkr.co/edit/wxcvssALhjxtzc7J4w3V
it is actually wider than it's parent element, which is very weird.
The html looks like this:
<div class="category-body">We are in the category-body
<div class="category-header">We are in the category-header</div>
</div>
And the CSS looks like this:
.category-body {
margin-left: 17% !important;
width: 67%;
background-color: red;
height: 500px;
}
.category-header {
position: fixed;
top: 51px;
width: inherit;
background-color: green;
}
Any ideas why this is happening? And, of course, how to fix it?
You are not using a reset css sheet so probably the browser's body margin by default is messing with your code. It will affect your parent as the position is static but it will NOT affect your fixed child as fixed elements get out of the html flow.
just add:
html, body {margin:0;}
FIDDLE
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block
Is there anyway for an absolute positioned child to expand to fill its relative positioned parent? (The height of parent is not fixed)
Here is what i did and it is working fine with Firefox and IE7 but not IE6. :(
<div id="parent">
<div id="child1"></div>
</div>
#parent { position: relative; width: 200px; height:100%; background:red }
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue }
That's easy. The trick is setting top: 0px and bottom: 0px at the same time
Here's the working code
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#parent {
display: block;
background-color: #ff0;
border: 1px solid #f00;
position: relative;
width: 200px;
height: 100%;
}
#child1 {
background-color: #f00;
display: block;
border: 1px solid #ff0;
position: absolute;
left: 200px;
top: 0px;
bottom: 0px;
}
Check out a working example here http://jsfiddle.net/Qexhh/
If I remember correctly there is a bug with how IE6 handles div height. It will only create the div to the height needed to contain the content within it when height is set to 100%. I would recommend two approaches:
Don't worry about supporting IE6 as it is a dead browser anyway
If that doesn't work, use something like jQuery to get the height of the parent div and then set the child div to that height.
fake it by setting the backgrounds to be the same colour so no-one notices the difference
You can achieve this with setting both the top and bottom attributes of the child.
See how this is done
At the bottom of that article, there is a link to Dean Edwards' IE7 (and IE8) js library that you should include for IE6 visitors. It is a JS library that actually MAKES IE6 behave like IE7 (or 8) when you include it. Sweet!
Dean Edwars' IE7 and 8 JS libraries
As far as I know, there is no way of expanding a parent element around an absolutely positioned child element. By making the child element absolutely positioned your are removing it from the regular flow of page items.
I recently built a 2-column website where the right column was absolutely positioned but the left column was not. If the left column had less content and a smaller height than the right column, the page would cut off the right column since it was absolutely positioned.
In order to resolve this, I had to determine if the height of the right column was greater than the height of the left column and if so set the height of the parent div height to the greater of the two.
Here is my jQuery solution. I'm not much of a coder so feel free to tweak this:
jQuery(function(){
var rightColHeight = jQuery('div.right_column').height();
var leftColHeight = jQuery('div.left_column').height();
if (rightColHeight > leftColHeight){
jQuery('.content_wrap').height(rightColHeight+'px');
}
});