Unlike most questions about overlapping content seen here, I would actually like content to overlap!
Here is my page. Try typing "USA Riverbrooke". Returned content pushes down the map.
What css syntax can allow the returned content to slide down and overlap the map?
http://tinyurl.com/ycblkkz
Make #message position: absolute; but also put it inside the same parent as the map, set left: 0; top: 0; on it, and set position: relative; on the parent. You shouldn't need to mess with z-index.
make the #message div position:absolute and give it a z-index greater than 0. It will show up on top of the map. You should then give it a non-transparent background so it stays readable.
Related
I cant figure out how to position a button to always be locked at the bottom of the container no matter how much text is above it, at the moment it is positioned below the last p tag.
here is the page for more context.
the button is the "change read status".
https://repl.it/repls/AmusingLuxuriousColdfusion#index.html
Change the position to relative of your card div and then change the button position to absolute and bottom: 0
I have edited it in the repl for you.
https://repl.it/join/epzcgyjb-t2drink
You should use the position: absolute property in your CSS since you are working within a div.
.[your button class] {
position: absolute;
bottom: 0;
}
What this does is it makes the position of your button relative to the container (i.e. the button's x and y coordinates will be based on the borders of the container). Then, you can use top, bottom, right, or left to position your element exactly where you want it to be. In this case, we just need bottom since you want to position it at the end.
Usually, elements are positioned based on position: static. There is also another property of position: relative, places an element relative to its current position without changing the layout around it. You can read more about the difference between position: absolute and position: relative here.
I currently have an animated image as the background of a website with HTML elements in front of it. Is it possible to replace that image with JSON geometry and still have my html elements in front of the geometry?
I've (unsuccessfully) looked into DOM Elements in ThreeJS. Tried putting my JSON in a div and controlling it with CSS..... That being said - is it possible to "style" or add JSON/js to a css?
Thanks to anyone that can help!!!
Yes, you can position the element you introduce that will contain your scene absolutely, stretch it across the screen and then add the rest of your elements in the DOM:
.scene {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
If you place it as the first child in the body, it will ensure that the rest of the content has a higher z-index, otherwise you will manually have to assign the value to the elements to ensure the scene isn't obfuscating the content.
Since the scene element will adjust to the screen size, you'll have to keep track when window resizes and ensure you update the scene dimensions with it, as one of the commenters pointed out.
I'm using a div with position: fixed to overlap an image. This works fine in firefox, but not in IE8. The div just sits below the image, even if I play with the top and left parameters.
Example of my Problem
Is this a known bug?
This is not the only way but should give you good starting point at least.
http://jsfiddle.net/lollero/EREc7/ - Parent element that has position: relative; makes sure that the element with position: absolute being the overlapping div would stick with the image no matter where you put the image.
http://jsfiddle.net/lollero/EREc7/1/ - The same with border
You can also do something like this:
position: relative;
z-index: 4 /* The higher the number the higher the element is. make sure to*/
top: -50px;
left: 0px;
And something like this:
http://jsfiddle.net/lollero/EREc7/3/
Note that the first one is the most flexible one.
Here's a bit bigger example
http://jsfiddle.net/lollero/EREc7/4/
Examples from the comments:
http://jsfiddle.net/lollero/nBk79/1
http://jsfiddle.net/lollero/nBk79/6/
Use z-index if you're talking about layering over one another. Then you can adjust them where you want and put one on top of the other.
I want an HTML element (let say a span or div) to be present on the page, but not take up any space, so I can switch on and off the visibility property, and nothing moves but the span disappears.
for example take a table. I want an 'edit' label to show at each row, when I move the mouse over. But I don't want it to take up space from the table width. I just want it to 'float' beside the table.
Any ideas how to achieve this?
I can not to use javascript. So I'll be very glad if this is possible with CSS only.
I have tried to use float, its not good because no element overlaps with it. (And i do want overlapping.)
I think you're after a CSS Tooltip. Here's an example of one:
http://psacake.com/web/jl.asp
div {
position: absolute;
left: 100px;
top: 100px;
}
This will take the div and position it relative to the first containing element with position other than static. If you have an item with a position of static (the default) or relative, it will affect the document flow and hence the position of other elements. If you set the position to absolute, it takes it out of the document flow and lets you 'drop' it onto the page at whatever pixel position you like. :D
Css position property
Without using javascript i suppose you could use CSS :hover. Like this:
<style type="text/css">
#world { display: none; }
#hello:hover #world { display: block; }
</style>
<div id="hello">
hello
<div id="world">world</div>
</div>
Demo: jsFiddle
The "float" property does not "float" an object over the other elements. It "float"s the element to one side or another.
To put an object over another object, use the z-index property combined with the position property.
z-index: 500;
position: absolute;
left: 50px;
top: 50px;
You can achieve this effect by making an additional column on the edge of your table that is invisible until its row is hovered over. You want to use visibility, not display, to hide and show because visibility maintains the allocated space of the cell.
Demo: http://jsfiddle.net/sCrS6/
You should be able to easily duplicate the code to make it work for your particular page.
This method also has the advantage of working more consistently across web browsers than using positioning, which often starts to have weird in IE behavior after a couple of elements are nested.
Every time I try to use z-index in a webpage to change the order of stacking overlapping divs, I seem to run into a problem where the div that is being forced lower becomes unresponsive to mouse events.
In my current situation I have:
<div class="leftcolumn">
<div class="leftbar"></div> <!-- a 95px wide bar on the left -->
...
<h3>header</h3> <!-- a little header sitting inside the leftbar
...
</div>
By default the h3 isn't showing - it's hidden behind the leftbar. If I add z-index: 5; to the h3, it still doesn't show.
So I add z-index: -1 to the leftbar. Now it's hidden behind the leftcolumn - but at least h3 shows.
So I add z-index: -2 to the leftcolumn. Now everything looks right - but you can't click on anything inside leftcolumn. The mouse cursor doesn't change from an arrow.
I get this exact behaviour in both Chrome and Firefox. IE7 doesn't show the leftbar at all, but at least stuff is clickable.
So, am I misunderstanding z-index, or is there a bug in both FF and Chrome here? Can z-index be effectively used for this kind of stuff, or do I have to find another way?
(I can change the HTML, but the less, the better.)
Ok, 10 seconds later I discover that using only positive z-index'es makes the problem go away. Perhaps negative z-index means the object is below the level that the mouse cursor notionally lives?
Do you know that in order for z-index to work right, you need to position your elements, even if they're simply position: relative (which doesn't change their position any but allows you to use z-index). That way, you should be able to give leftbar a position of, say, 2 and your h3 a position of, say, 3. And your h3 should be on top.
You can use any position type as long as you have one.
For recap:
#leftcolumn { position: absolute; z-index: 1; }
#leftbar { position: relative; z-index: 2; }
h3 { position: relative; z-index: 3; }
Even though the leftcolumn content is visible, the leftbar div is now sitting on top of it, likely with a transparent background. Ideally you would want to modify the HTML so that the H3 resides within the leftbar, but if that is not an option, you may need to apply z-index to specific elements within the leftcolumn in order to pull them above elements in the leftbar.