I have a problem understanding z-index properly.
Please have a look at this fiddle I created for you: http://jsfiddle.net/df3EL/
<div id="content">
1. Content
<div id="popup">
3. PopUp
</div>
</div>
<div id="footer">
2. Footer
</div>
I'm aware of positioning and opacity influencing z-index. But with this markup, no matter what I try, the footer is above 1 & 3 or below - never in between.
Is there any way to make the order (1, 2, 3) work, without changing the html markup?
z-index inherits from the parent element
So if your 1 element has a z-index of 100, your 3 element cannot exceed that value in the global scope. In the local scope (within the #content element), the z-index will essentially "reset"
So to make your thing work, you'll need to change the HTML markup to make each element independent (so they can have sequential z-index in the global scope)
if you want popup be hover footer, just set index for footer and popup : http://jsfiddle.net/df3EL/1/
div {
font-family: Verdana;
font-size: 11px;
padding: 20px;
}
div#content {
display: block;
height: 150px;
width: 250px;
background: #eee;
position: relative;
}
div#footer {
display: block;
height: 50px;
width: 250px;
background: #eeefc0;
position: relative;
left: 25px;
top: -25px;
z-index: 1;
}
div#popup {
display: block;
height: 140px;
width: 100px;
background: #C0C0EF;
position: relative;
left: 220px;
top: -5px;
z-index: 2;
}
[http://jsfiddle.net/df3EL/3/][1]
Remove all z-index property except div#popup
It should work in modern browser (suppose ie9+, chrome, opera, FF)
But more logical way move #popup after #footer (may be it should do with javascript when needed to show popup)
You have used position:relative for div#footer and div#popup. Change this to position: absolute and change the vaules top, bottom, left,right to get the desired result.By this you won't have to change your html structure.
Related
If you take a look at my test website here you will see that the "Scroll Down" button is overlapping all my content, no matter what z-index I input. Is there a way to fix this issue? I realize that my position is absolute and that is most likely the issue, but if I state it as relative it is no longer set at the bottom of my page.
#scroll-down {
height: 53px;
width: 100%;
display: table-cell;
position: absolute;
color: #fff;
padding-top: 20px;
padding-bottom: 20px;
bottom: 0;
left: 0;
z-index: inherit;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: all 0.25s ease-in-out;
}
#scroll-down:hover {
color: #bae9ff;
background-color: #fff;
}
<div class="site-wrap">
<div class="background-image img-home">
<div class="text">Welcome!</div>
<a id="scroll-down noselect">
<div id="scroll-down">Scroll Down
<br />
<object class="scroll-down-img" height="33" width="50"></object>
</div>
</a>
</div>
z-index becomes effective only for elements that have attribute position with value absolute or fixed or relative. Elements with position: static (which is the default for all elements) will not be affected by the z-index.
Easiest way in your case, add position: relative to .header, so your header tag becomes like this:
.header {
width: 100%;
background-position: center;
background-repeat: no-repeat;
z-index: 1000;
position: relative;/* this will fix it */
}
If you want to push your scroll div under the header then use z-index:999 in .top-bar class so top-bar will come above the scroll bar text and you are done.
.top-bar {
z-index:999;
}
The problem you have is with "Object" tag. Tags like OBJECT, EMBED,FRAME (and SELECT in some previous browser versions) are rendered as part of window model and does not respect z-index. The classic approach is to put the top content in iframe. In your case I can not understand why you need Object tag for simple button. Just change it with image.
I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.
Want an image to appear when hover over text.
I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?
So far I have:
<div id="popup">
<div class="large-6 columns">
Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span>
</div>
</div>
and
#popup span {
display: none;
}
#popup a:hover span {
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
#bristol {
position: absolute;
z-index: 1;
margin-top: 100px;
}
If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.
Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/
For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.
Please give relative positioning to your span that holds your image.
#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
Remove the margin-top from the image tag as well.
#bristol {
position: absolute;
z-index: 1;
/*margin-top: 100px;*/ //Removed margin-top on the image
}
After my website was completed, everyday I am trying to modify things that would make it more responsive. It's made in Muse so don't expect much of "responsiveness".
I have an element with this class:
#labelstrong
{
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: fixed;
top: 1542px;
left: 164px;
}
Normally, the element is in the middle of the screen. But when I zoom out, the element maintains the same distance to the top of the screen (because of the top attribute of course). How can I define its position in a way that even if I zoom in or out it will still be in the middle of the screen.
UPDATE:
The problem is (and I forgot to mention it) that the position must be fixed as there is an horizontal scrolling feature for all elements ( they come from the right of the screen) and so they have to be on a fixed position.
UPDATE 2: Here is a live example. Imagine that the class is applied on each TAG (not the menu of course).
http://2323029s8s8s8.businesscatalyst.com/index.html
You can add for those big tags the following css:
.fixed-big-tag{
top: 50%;
transform: translateY(-50%);
}
Also as a counter measure, make sure the <body> and the <html> have 100% heights
Another idea would be to use the !important rule for the top property to overwrite what Muse outputs.(or any rule that needs to be overwritten)
If it works, you could probably add a new class on all these tags that need to be centered and overwrite it via css
Check it out, and let me know how it goes.
See this resource for techniques to centering elements using CSS: Centering in CSS: A Complete Guide
If you create a relatively-positioned parent container element, you can center your child element easily:
.parent {
position: relative;
}
#labelstrong {
z-index: 17;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: absolute;
width: 634px;
height: 40px;
top: 50%;
left: 50%;
margin: -20px 0 0 -317px;
}
Note that the margin offsets are half of the width and height.
Try using percentages instead of pixels, like:
top: 10%;
If you want to horizontally center, try setting the margin to auto:
margin: 0 auto;
Your code would look like this:
#labelstrong {
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: relative;
top: 10%;
margin: 0 auto;
}
Take a look at this example: http://jsfiddle.net/5a6fyb21/
jQuery would be your best bet.
I would just set your class to a fixed position then try using the following.
$(window).resize(function() {
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});
The resize function is used so that it will remain in position if the window is resized.
Centered label over horisontally scrollable content:
http://jsfiddle.net/cqztf9kc/
.fixed {
margin: 50%;
position: fixed;
z-index: 1;
}
.content {
x-overflow: scroll;
height: 100%;
}
I am trying to create a relative-positioned element with overflow:hidden that contains a few fixed-position elements. The goal is to have the fixed child elements become hidden as the parent element moves, sort of like if they were part of a background-image with attachment:fixed on the parent element.
By all accounts on StackOverflow and elsewhere on the web, this is not possible, because a fixed element only regards the browser window and ignores its parent element. However, for whatever reason it actually works as intended in Chrome only: http://jsfiddle.net/x6avvhuf/
Here's what the fiddle looks like, view it in Chrome vs. IE/Firefox to see the difference:
HTML
<body>
<div id = "headwrapper">
I am the relative parent element
<div class = "fixedchild">
I am a fixed child element
</div>
</div>
<div id = "content">
This is the main content portion of the page<br>
<!-- Repeat until the page scrolls -->
This is the main content portion of the page<br>
</div>
CSS
body {
background-color: yellow;
}
#headwrapper {
position: relative;
height: 300px;
width: 100%;
overflow: hidden;
z-index: -1;
background-color: black;
color: white;
text-align: center;
}
.fixedchild {
position: fixed;
width: 75%;
height: 40px;
z-index: 48;
top: 22.5%;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
What is an alternative solution for this? I have read that it is possible to make an absolute element behave like a fixed element with CSS, but I have been unable to make this work so far. Thanks in advance for any help or advice! :)
UPDATE
Sometimes the best solutions are the most simple. Given the code you posted all you would have to do is set a background-color on #content (ex: yellow in this instance to match the body) since your fixed element has z-index: -1 and will sit behind it anyways:
#content{
background: yellow;
width: 100%;
}
CSS EXAMPLE 1
OR
You could set #content to position:relative which would allow you to order this and your fixed div with z-index (this is probably better, using z-index: -1 is kind of a hack):
CSS
.fixedchild {
position: fixed;
width: 75%;
height: 40px;
z-index: 1; //set to 1
top: 22.5%;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
#content{
background: yellow;
width: 100%;
position: relative; //add
z-index: 2; //set higher
}
CSS EXAMPLE 2
(previous answer):
DISCLAMIER: This is not a CSS solution.
There may be a CSS solution for this. I don't happen to know one off the top of my head, but I do know this can be done pretty easily with Jquery
JS
$(window).scroll(function(){
var scrolled = $(this).scrollTop()+100; //offset starting position which I hard coded to top: 100px - you can change as needed
$(".fixedchild").css({"top": scrolled+"px"});
});
CSS
.fixedchild {
position: absolute;
width: 75%;
height: 40px;
z-index: 48;
top: 100px;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
JS EXAMPLE
How do I make an html div tag to be on top of everything? I tried adding z-index: 1000, but it remains the same.
In order for z-index to work, you'll need to give the element a position:absolute or a position:relative property. Once you do that, your links will function properly, though you may have to tweak your CSS a bit afterwards.
Yes, in order for the z-index to work, you'll need to give the element a position: absolute or a position: relative property... fine.
But... pay attention to parents!
The element's z-index may be limited by its parent's z-index value.
You have to go down the nodes of the elements to check if at the level of the common parent the first descendants have a defined z-index.
All other descendants can never be in the foreground if at the base there is a lower definite z-index.
In this snippet example, div1-2-1 has a z-index of 1000 but is nevertheless under the div1-1-1 which has a z-index of 3.
This is because div1-1 has a z-index greater than div1-2.
.div {
}
#div1 {
z-index: 1;
position: absolute;
width: 500px;
height: 300px;
border: 1px solid black;
}
#div1-1 {
z-index: 2;
position: absolute;
left: 230px;
width: 200px;
height: 200px;
top: 31px;
background-color: indianred;
}
#div1-1-1 {
z-index: 3;
position: absolute;
top: 50px;
width: 100px;
height: 100px;
background-color: burlywood;
}
#div1-2 {
z-index: 1;
position: absolute;
width: 200px;
height: 200px;
left: 80px;
top: 5px;
background-color: red;
}
#div1-2-1 {
z-index: 1000;
position: absolute;
left: 70px;
width: 120px;
height: 100px;
top: 10px;
color: red;
background-color: lightyellow;
}
.blink {
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
.rotate {
writing-mode: vertical-rl;
padding-left: 50px;
font-weight: bold;
font-size: 20px;
}
<div class="div" id="div1">div1</br>z-index: 1
<div class="div" id="div1-1">div1-1</br>z-index: 2
<div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
</div>
<div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
<div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br> parent)</span></div>
</div>
</div>
More simply :
For z-index:1000 to have an effect you need a non-static positioning scheme.
Add position:relative; to a rule selecting the element you want to be on top
You need to add position:relative; to the menu. Z-index only works when you have a non static positioning scheme.
z-index property enables you to take your control at front. the bigger number you set the upper your element you get.
position property should be relative because position of html-element should be position relatively against other controls in all dimensions.
element.style {
position:relative;
z-index:1000; //change your number as per elements lies on your page.
}
I gonna assumed you making a popup with code from WW3 school, correct?
check it css. the .modal one, there're already word z-index there. just change from 1 to 100.
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
It seems like nesting an element inside a <dialog> element puts it on top of everything. It is placed both horizontally and vertically centered to the screen if you use showModal() but you lose the interactivity with other elements in the page.
document.querySelector("dialog").showModal();
<dialog>
<div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element</div>
If you still want interactivity with the background elements, you can use the show() method. It is placed only horizontally centered to the screen.
document.querySelector("dialog").show();
<dialog>
<div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element to check if I am underneath or not.</div>