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.
Related
I'm trying to place fixed element and keep it relative to its container, not the port view.
I made it in chrome.
On Safari however, the fixed element is placed at the bottom of the page, disregarding its parent position and place. For some reason it gets the right place when clicking the container.
I tried to add translate property to the fixed element, it didn't help.
I tried to create the fixed behaviour with absolute position instead of fix, but couldn't make it to work. It moved with the scroll.
Container CSS
.Container {
display: flex;
flex-direction: column;
position: relative;
}
Fixed Element CSS
.Fixed {
font-weight: 300 !important;
width: fit-content;
font-size: 14px !important;
position: fixed;
background: value(CalendarBackground);
bottom: 0;
left: 3px;
width: 100%;
padding-left: 32px;
border-radius: 3px;
height: 68px;
}
EDIT 1 - React Component JSX (HTML TO BE)
<div className={classes.ExpandedEvent}>
// CONTAINER
<div className={classes.Container}>
<div className={classes.TimeContainer}>
<Text className={classes.Time}>{time}</Text>
{recurrenceJsx}
</div>
{locationJsx}
{summaryJsx}
{attachmentsJsx}
</div>
// FIXED
<TextButton onClick={_onCopyClick} className={classes.Fixed}>{t('Google_Calendar_Copy')}</TextButton>
</div>
EDIT 2 - LIVE EXAMPLE
https://itaytur.github.io/wix-calendar/?path=/story/calendar--desktop-agenda
I deployed the component so it could be seen live. not all the css was loaded sorry in advance, but for reproduce the bug it works.
click the first event from the top, called: CLICK TO SEE FIXED 'COPY TO CALENDAR' BTN IN THE POPUP BOTTOM - NOT SHOWING ON SAFARI.
in chrome the copy button is shown and sticks to the bottom of the popup even when scrolling, in safari it doesn't shown at all.
Because fixed item doesn't care about relative container
You can use absolute position inside a fixed element
But there is already a lot of post about it:
Juste take a look here:
Fixed position but relative to container
Can I position an element fixed relative to parent?
You can also take a look to sticky property: https://www.w3schools.com/howto/howto_css_sticky_element.asp
.wrapper{
width: 100%;
padding: 40px;
background: yellow;
}
.relative-item{
width: 200px;
height:100vh;
background: green;
}
.fixed-item-wrap{
position: fixed;
width: 200px;
height:100vh;
}
.fixed-item{
background: red;
color: white;
position: absolute;
top: 20px;
}
<div class="wrapper">
<div class="relative-item">
<div class="fixed-item-wrap">
<div class="fixed-item">
I'm fixed but relative !
</div>
</div>
</div>
</div>
Here's an example of what I think it is that you're trying to achieve.
If you want the child position to be relative to it's initial position, you should set it's position as relative.
.Container {
background: red;
padding: 50px;
}
.Relative {
background: white;
font-weight: 300 !important;
font-size: 14px !important;
position: relative;
bottom: 20px;
border: 1px solid black;
left: 55px;
padding-left: 32px;
border-radius: 3px;
height: 68px;
}
<div class="Container">
<div class="Relative">
My position is relative to my initial position
</div>
</div>
the top attribute appears not to be working on a html. I am trying to use the top attribute on image to move an image to the top and place above a text but the top attribute of a css never moves the image Here is snippet
<div class="stl_02">
<div class="stl_03">
<img src=""
alt=""style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
//other texts here
here are the css rules
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em,51.04167em,66.04166em,-0.041667em);
position: absolute;
pointer-events: none;
}
Please how can push the image to the top using this attribute style="top: 4.4538em;" is a challenge
Your element does have the top attribute applied. This can be seen in the following:
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em, 51.04167em, 66.04166em, -0.041667em);
position: absolute;
pointer-events: none;
}
<div class="stl_02">
<div class="stl_03">
<img src="http://placehold.it/100" alt="" style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
</div>
</div>
</div>
If you are not seeing this effect, it is possible you have a rule with higher specificity overriding it, or you have cached the style before you applied this rule.
It's also worth noting that top only works on a positioned element. You need to have position: relative, position: absolute or similar on .stl-04 in order to position it with top.
Alternatively, you may be looking for margin-top, which positions vertically based on the containing element.
As an aside, basing margins off of font sizes (with em units) is generally bad practice; you should really use fixed units instead (preferably not going to so many decimal places).
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
}
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.
I opened the console (chrome\firefox) and ran the following lines:
$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");
The #popupContent should be above all but it's affected by the #popupFrame opacity.
The content is not contained in #popupFrame which makes this very weird.
The goal is to create a firefox-like alert box.
The second div is position: static (the default) so the z-index does not apply to it.
You need to position (set the position property to anything other than static, you probably want relative in this case) anything you want to give a z-index to.
Old question but this answer might help someone.
If you are trying to display the contents of the container outside of the boundaries of the container, make sure that it doesn't have overflow:hidden, otherwise anything outside of it will be cut off.
Opacity changes the context of your z-index, as does the static positioning. Either add opacity to the element that doesn't have it or remove it from the element that does. You'll also have to either make both elements static positioned or specify relative or absolute position. Here's some background on contexts: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
z-index only applies to elements that have been given an explicit position. Add position:relative to #popupContent and you should be good to go.
I faced this issue a lot when using position: absolute;, I faced this issue by using position: relative in the child element. don't need to change position: absolute to relative, just need to add in the child element look into the beneath two examples:
let toggle = document.getElementById('toggle')
toggle.addEventListener("click", () => {
toggle.classList.toggle('change');
})
.container {
width: 60px;
height: 22px;
background: #333;
border-radius: 20px;
position: relative;
cursor: pointer;
}
.change .slide {
transform: translateX(33px);
}
.slide {
transition: 0.5s;
width: 20px;
height: 20px;
background: #fff;
border-radius: 20px;
margin: 2px 2px;
z-index: 100;
}
.dot {
width: 10px;
height: 16px;
background: red;
position: absolute;
top: 4px;
right: 5px;
z-index: 1;
}
<div class="container" id="toggle">
<div class="slide"></div>
<div class="dot"></div>
</div>
This's how it can be fixed using position relative:
let toggle = document.getElementById('toggle')
toggle.addEventListener("click", () => {
toggle.classList.toggle('change');
})
.container {
width: 60px;
height: 22px;
background: #333;
border-radius: 20px;
position: relative;
cursor: pointer;
}
.change .slide {
transform: translateX(33px);
}
.slide {
transition: 0.5s;
width: 20px;
height: 20px;
background: #fff;
border-radius: 20px;
margin: 2px 2px;
z-index: 100;
// Just add position relative;
position: relative;
}
.dot {
width: 10px;
height: 16px;
background: red;
position: absolute;
top: 4px;
right: 5px;
z-index: 1;
}
<div class="container" id="toggle">
<div class="slide"></div>
<div class="dot"></div>
</div>
Sandbox here
If you're a big 'ol dumdum like me (but know your positioning rules are 100% correct) trying to get something like this:
to look like this:
Your solution may be as simple as ensuring your background is not transparent for the element you want in front of/behind the other element.
I had the the same problem, and i tried to solve it by appending the element with absolute position in a div with a sticky position, my problem was with speeddial (reactjs + material), so i dont know if it will work with all cases.
It may be too late, but it can be preferred as an alternative method. The order of layering for displaying elements in the absolute position depends on the order in which the elements are inserted into the parent element. In other words, instead of using z-index, it is possible to send it to the back by adding it with $(parent).prepend(me), and to bring it to the front by adding it with $(parent).append(me).
function BringToFront(){
$("#parent").append($("#me"));
}
function SendToBack(){
$("#parent").prepend($("#me"));
}
#mySister{
position:absolute;
left:25px;
top:25px;
width:100px;
height:100px;
background-color: red;
}
#me{
position:absolute;
left:50px;
top:50px;
width:100px;
height:100px;
background-color: yellow;
}
#myBrother{
position:absolute;
left:75px;
top:75px;
width:100px;
height:100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="mySister"> </div>
<div id="me">Hello! this is me!</div>
<div id="myBrother"> </div>
</div>
<button type="button" onclick="BringToFront()">Bring to front</button>
<button type="button" onclick="SendToBack()">Send to back</button>