I'm still newbie in using CSS..
I really need help for doing our team's small project for mobile app :D
Here's my question :D
Is it possible for CSS to put "one element" above "another element" ??
For example I have "a wooden board" element and I have another element "sticks" ..
I would like the "stick" element behind "the wooden board" element.. So it's like a billboard style :D
(If in Photoshop, we can just drag the layer "sticks" below the layer "board")
If it is possible, then how to do it ?
I try to look for some sources but didn't get any result..
Any help would be appreciated :D (code/reference/etc)
Thanks a lot
NB : can't post the image :( since I just start to use stackoverflow, sorry :(
Yes you can, there are multiple ways of achieving that..
1st using position: relative; and z-index(optional)
Demo
<div class="one"></div>
<div class="two"></div>
.one {
height: 100px;
width: 100px;
background: #f00;
}
.two {
height: 100px;
width: 100px;
background: #0f0;
position: relative;
top: -70px;
left: 30px;
}
2nd you can use position: absolute; wrapped inside position: relative; container
Demo 2
<div class="one">
<div class="two"></div>
</div>
.one {
height: 100px;
width: 100px;
background: #f00;
position: relative;
}
.two {
height: 100px;
width: 100px;
background: #0f0;
position: absolute;
bottom: -30px;
left: 30px;
}
The first example is useful if you have 2 separate elements, you can use position: relative; and position the element accordingly using top, right, bottom and left properties.
The other example uses position: absolute; but did you see the change in markup? I've positioned absolute the child element, which is nested inside position: relative; element. I would prefer this solution.
z-index is optional, say if you want the bring up the 1st element over second
Demo
Make sure you use position property which is set to relative absolute or fixed as z-index doesn't work on static which is default position.
Also I would like to add up here, that I didn't provided z-index solution for Demo 2 as the elements are nested, so you cannot position a child element behind parent, it inherits parent elements z-index
Related
I have a div that contains scrollable content and I want to place an overlay on top of that div.
However, the overlay makes everything underneath it unscrollable and unclickable (obviously). Is there a way around that? Some HTML/CSS/JS combination maybe that keeps visible and yet allows the div that is right underneath it to still be scrollable/clickable ?
The reason I'm asking is because I have a div with a background-image (that's my overlay). But the image has a hole in the middle (it's a partially transparent png). So the div that is actually underneath this overlay is visible. So I want to be able to interact with that div.
I know I can write Js to transfer any click/scroll events from one element to another but I have lots of instances of the above setup on a single page, so writing that Js for every single case would be an overkill.
Thank you in advance for your help.
CSS
#scroller {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 50px;
}
#scroller>div {
position: absolute;
top: 0px;
left: 0px;
height: 500px;
width: 50px;
}
#scroller-overlay {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 50px;
}
HTML
<div id="scroller">
<div></div>
</div>
<div id="scroller-overlay"></div>
JSFIDDLE : http://jsfiddle.net/7L8cmeuo/3/
Yes, with CSS in the scroller overlay:
pointer-events: none;
All clicks and other mouse events in the area of the transparent PNG will then fall through to the elements below it. See updated version of your fiddle.
I'm trying to make an effect similar as used on http://www.t-mobile.com/ , when the user scrolls down to the bottom of the page they reveal the "footer" more and more as the user keeps on scrolling.
I've tried to search both here and on google but haven't been able to find anything that's really useful. Most examples only shows/hide the footer once the user scrolls to the bottom.
So my question is, what's the effect called to reveal an element by scrolling? Are there any good tutorials / blog posts about this? All help I can get is much appreciated!
As I commented, you need to make your element fixed, so as explanation goes, I have two elements here, one is a normal position: relative; element, so nothing fancy about that, I assigned relative so that I can make the z-index work
Second element is positioned fixed and also, make sure you use margin-bottom which should be equal to the height of your footer, no need to assign any negative z-index whatsoever to this element.
Demo
Not much HTML ...
<div></div>
<div>Reveal Me</div>
CSS
/* These are for your main site wrapper */
div:first-child {
height: 800px; /* Even auto is fine, I
used fixed height because I don't have any content here */
background: #eee;
margin-bottom: 200px; /* Equals footer wrappers height */
z-index: 1;
position: relative;
}
/* These are for footer wrapper */
div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
For Dynamic Sizes
Note that am using a fixed height for the fixed positioned element, if you have variable height in footer element, than you need to use JS or jQuery to calculate the height using
$('#wrapperElement').css('margin-bottom', $('#footer').height());
Here, the selectors of #wrapperElement and #footer are my assumed ones, you can replace those with the your own selectors.
Something about fixed element - Horizontal Centering (I think it will be helpful to some users)
When you will make your element fixed, it will get out of the document flow, so if you are assigning fixed to the wrapper of footer element and want to center some content in there, than nest another element inside that wrapper and use width and margin: auto; for that...
Demo 2
HTML
<div></div>
<div>
<div>Reveal Me</div>
</div>
CSS
body > div:first-child {
height: 800px;
background: #eee;
margin-bottom: 200px;
z-index: 1;
position: relative;
}
body > div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
body > div:last-child div {
width: 80%;
margin: auto;
outline: 1px solid red; /* To show that element is horizontally centered */
}
Note: Selectors used in this answer are too general and are good for
quick demonstration purposes, in real projects, make sure you use
specific selectors
I've seen several posts like this and I haven't found anything specifically targeting the problem I am having (maybe I didn't search enough, forgive me for that!).
Anyway, I basically need my child div to position itself over the parent div.
Here's the catch though, the child has to be nested inside the parent div, example:
<div id="parent">
<div id="child"></div>
</div>
My parent is basically a moving block (that you can move with arrow keys) and the child is basically an attribute to the parent and should move with it but over it as well.
Is this possible?
I also want to do this without having to write a separate movement code for the child.
You can use this CSS to peg the child to be the full size of the parent (which will cover the parent background):
#parent {position: relative; height: 200px; width: 200px;}
#child {position: absolute; height: 100%; width: 100%;}
Working demo that shows you can move the parent and the child stays covering it: http://jsfiddle.net/jfriend00/XGU4w/
Or, if you only have the one single child, then it's simply a matter of setting the child height and width to be 100% and then setting a size on the parent.
#parent {height: 200px; width: 200px;}
#child {height: 100%; width: 100%;}
Working demo: http://jsfiddle.net/jfriend00/s89a3/
Try this fiddle: http://jsfiddle.net/sNW8W/
You simply have to give the child element a higher z-index. The code from the previous answer would not work, providing no z-index. Remember: only elements that carry the position attribute can make use of the z-index property.
#parent {
position: relative;
background:red;
height:100px;
width: 100px;
z-index:0;
}
#child {
position: absolute;
top: -10px;
left: 25px;
background: green;
height: 50px;
width: 50px;
z-index: 10;
}
I have div that I display dynamically when certain conditions arise.
When I display the div, how can I create the effect of the background dimming and my div appearing to be prominent? much like a number of AJAX lightboxes or popups. (Thickbox, ColorBox, PrettyPhoto, etc)
I don;t quite get how they do it. I have everything else working in my own custom code except that piece.
Can anyone help me learn how?
Place a div over the content and set an opacity. I use this in one of my sites.
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
div#error_wrapper {
z-index: 100;
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}
If you create a layer that is the full width & height of your page and give it a higher z index than your whole page, you can create this effect. Then put your appearing div over it.
Just use global div of the size of the page to cover any other content:
http://jsfiddle.net/CHkNd/1/
Here is an example that you can play around with.
http://jsfiddle.net/r77K8/1/
Hope this helps.
Bob
I have a slew of normal inline <a> links that I want to open up small "floating" objects on click. These objects would be simple HTML divs (with some CSS) that would load on top of the page and below the link. I don't want to use relative positioning which would push the page around and I can't think of a way to use absolute positioning to get the divs underneath the inline links. I currently envision toggling the display value of the objects from none to whatever and back. I'm open to ideas.
Thanks!
Mike
You may use absolute positioning with the parent set to relative. e.g.
<div id="container">
<a href=...>hover me for floating!</a>
<div class="floating">
...
</div>
</div>
In CSS,
#container { position: relative; ... }
.floating { position: absolute; top: 20px; left: 20px; }
In the above example, the .floating div is absolute positioned, which means it is taken away from the normal flow (ie, no placeholding it). But it also relative reference to it's parent, which is the div#container in this case, so that, if you set the top and left position, it is actually calculated from the top-left corner of div#container rather than to the document body.
you can use "fixed" position:
<div style="position: fixed; left:100px; top:100px; background-color: white; height: 200px; width: 200px;"> ... </div>
"fixed position" --> Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties
I'd suggest:
<style="text/css">
a {
display: inline;
position: relative;
}
a span.pop_up_floaty_thing {
position: absolute;
top: 1em;
left: 0;
display: block;
width: 10em; /* or whatever */
}
</style>
Link text<span class="pop_up_floaty_thing">The pop up, floaty thing text</span>