Stick an image button to the right edge of an iframe overlay - html

I have my resume in an iframe div that overlays my portfolio section when a link in my nav is clicked. I have an "X" image for user to click to close overlay, and I want to place it to the right of the resume iframe (ie: it butts up against the outer right edge of the iframe).
I can't seem to figure out how to do this - I tried using various different float, positioning and margin setups but the closest I can get is where the "x" is on the right side but its position moves with the window rescaling. I would like for it instead to "stick" to the right edge of the resume and stay there! Is there a way to do this? Here is my code:
HTML:
<header>
<nav></nav>
</header>
<div id="resume-overlay">
<div id="resume">
<iframe src="resume.html"></iframe>
<img class="button" src="img/x-button.png">
</div>
</div>
<div id="portfolio">
</div>
CSS:
header {
height: 80px;
width: 1600px;
position: fixed;
top: 0px;
z-index: 1;
background-color: white;
margin-left: 100px;
}
#resume-overlay {
display: none;
position: fixed;
z-index: 2;
top: 80px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .9);
}
.resume {
position: relative;
max-width: 1600px;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
}
.button {
position: absolute;
z-index: 3;
right: 0;
padding-right: 10%;
}
And my jQuery if needed:
$(function() {
$('#overlay').on('click', function() {
$('#resume-overlay').fadeToggle('fast');
});
$(".button").click(function(event) {
event.preventDefault();
history.back(1);
$('#resume-overlay').fadeToggle('fast');
});
});
To illustrate, I want to move that blue X to the right edge of the white box

I'm not sure they type of error you're seeing yet, but your code here:
.button {
position: absolute;
z-index: 3;
right: 0;
padding-right: 10%;
}
Is all I think you need to address, try adding
top: 0;
right: 0;
And remove the padding, work with those values to get the button where you want it, and it shouldn't move from those setting regardless of window size.

Related

Unable to click background components because upper z-index div margin is spread horizontally

I have 3d canvas with z-index : -1
I want to display components on z-index: 0 and be able to click 3d canvas without any problems. Unfortunately when I add component A to z-index: 0 margin of this component is spread horizontally and I'm unable to click 3d canvas one the left and right side of component A.
.background-3d-canvas {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
background-color: silver;
}
.front-component {
background-color: blue;border-radius: 10px;
padding: 20px;
margin: auto;
width: 300px;
background-color: blue;
}
<div class="background-3d-canvas">
Test<br/>
Test2<br/>
Test3<br/>
Test4<br/>
Test5<br/>
Test6<br/>
</div>
<div class="front-component">
Editor
</div>
I created jsfiddle to demonstrate this problem. Not all links are clickable.
https://jsfiddle.net/ec5uuthy/
You can add those attributes to .front-component:
pointer-events: none;
position: absolute;
left: 0;
right: 0;
https://jsfiddle.net/76bpqge1/

Links not working inside div

I think this question is related to Link not working inside floated div but I still can't figure it out.
I have a div as follows:
.fullwidthimage {
width: 100%;
position: relative;
z-index: -1;
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 1;
top: 15px;
width: 100%;
}
#homepagebutton {
position: absolute;
text-align: center;
z-index: 100;
bottom: 50px;
width: 200px;
height: 60px;
left: 50%;
margin-left: -100px;
font-size: 25px;
border: 1px solid black;
border-radius: 5px;
background-color: orange;
color: black;
text-decoration: none;
}
<div class="fullwidthimage">
<img class="noround imageundertext smallimg" src="http://placehold.it/600x800">
<img class="noround imageundertext midimg" src="http://placehold.it/1000x1000">
<img class="noround imageundertext bigimg" src="http://placehold.it/3200x1300">
<img class="noround imageundertext xlimg" src="http://placehold.it/5000x1500">
<h1 class="imageoverlay">Title Here</h1>
Get Started
</div>
The different images are using a CSS media query to display/hide at different sizes. The whole thing is a full width image with a text title and 'button' (that's actually just a link styled to look like a button) over the top of the image.
Whatever links I put inside that div won't work - the text shows on the page, but nothing happens if you mouse over.
Why?!
Links placed immediately outside of the div on the same page work just fine, so I don't think it's anything to do with other containing divs there.
I'm assuming from that previous question asked that it's something to do with the positioning, but I can't make it work.
Thanks!
If you give a -1 in z-index, it goes behind body. So the whole div.fullwidthimage becomes unclickable or unaccessible. So, give z-index: 1 as the starting point.
.fullwidthimage {
width: 100%;
position: relative;
z-index: 1; /* Change this! */
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 2; /* Increase this! */
top: 15px;
width: 100%;
}

Not covering full screen iPhone

I'm trying to make a div that stretches over the screen and that the user needs to click to dismiss. It works well on computer and Android phones but not on the lesser unit iPhone.
Here is the code:
.hidden-overflow {
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150%;
z-index: 10;
background-color: #FFF228;
}
.overlay.ng-hide-add {
transition: .8s linear all;
height: 100%;
overflow: hidden;
}
.overlay.ng-hide-add-active {
height: 0;
}
<div ng-if="showOverLay">
<div class="overlay" ng-init="overlayShow()" ng-click="overlayRemove()" ng-hide="hideOverlay">
<h1 class="header" data-translate>Welcome!</h1>
<h2 class="header" data-translate>JADA JADA JADA <br>Click to continue</h2>
</div>
</div>
It seems like its the overflow that isn't working. How can I fix this?
Since you're already using an absolute positioned element, I would disregard height and width entirely and stretch the image to the entirety of the page using positioning:
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
#overlay {
background: tomato;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="overlay"></div>
</body>
Going a step further, you likely want the overlay to not scroll away on longer pages. For this, use position:fixed. This only has the disadvantage of scrolling still being enabled; so if a user scrolls, the overlay will look correct, but once they click it away, they will end up in the middle of the page. Addressing this requires a JS solution that goes beyond the scope of this question.

How do I establish a new root level z-index in a child of a fixed element?

Given the following HTML:
#header {
position: fixed;
z-index: 1;
background-color: red;
width: 100%;
height: 150px;
top: 0;
}
#drop {
position: absolute;
top: 5px;
width: 100px;
background-color: green;
height: 400px;
z-index: 3;
}
#footer {
position: fixed;
z-index: 2;
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
<div id="header">
<div id="drop">
</div>
</div>
<div id="footer">
</div>
How do I amend the CSS only, so #drop is considered in front of both #header and #footer. While maintaining that #footer is in front of #header?
According to the current standard, this is as easy as removing the z-index from #header. With the default z-index of auto, the header does not establish a new stacking context, and thus the dropdown and the footer belong to the same stacking context, and #drop's z-index of 3 pushes it above the footer. You can even remove the z-index from the footer as well; because it comes after the header in document order, it will still be on top.
Try it out:
#header {
position: fixed;
background-color: red;
width: 100%;
height: 150px;
top: 0;
}
#drop {
position: absolute;
top: 5px;
width: 100px;
background-color: green;
height: 400px;
z-index: 3;
}
#footer {
position: fixed;
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
<div id="header">
<div id="drop">
</div>
</div>
<div id="footer">
</div>
Works great. In Firefox.
But since you're probably using Chrome, not so much. Chrome has decided to ignore the standard for mobile performance reasons; in Chrome, a position: fixed element always establishes a new stacking context, regardless of its z-index value. As BoltClock points out, this change may sooner or later appear in other browsers as well.
And thus in Chrome, since the dropdown is a descendant of the header, its stacking context is the one established by the header, and that stacking context is below the footer, per your requirement. So in a cross-browser future-proof way and within your constraints, this is utterly impossible.
If you want to do this without your JavaScript workaround, I see two options:
Move the dropdown out of the header
That works easily enough in your example
#header {
position: fixed;
z-index: 1;
background-color: red;
width: 100%;
height: 150px;
top: 0;
}
#drop {
position: fixed;
top: 5px;
width: 100px;
background-color: green;
height: 400px;
z-index: 3;
}
#footer {
position: fixed;
z-index: 2;
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
<div id="header">
</div>
<div id="drop">
</div>
<div id="footer">
</div>
but is more elaborate in your actual case on Discourse, where the dropdown then can no longer be top: 100%; for nice positioning. You'd actually have to measure the correct y-coordinate when creating the dropdown, so this isn't a JS-free solution either.
Keep the dropdown in the header, but make the header not create a new stacking context
However, as explained above, this means that the header cannot be position: fixed anymore. And since your header must of course be fixed in the viewport (and we don't want to ensure this via JS), the header then has to have an ancestor that's position: fixed instead.
Just wrapping the header in another fixed-position div doesn't do you any good, since it creates the exact same problem; the footer is still in a different stacking context. So this wrapper div needs to include both the header and the footer. If that's not doable in Discourse's architecture, you can stop reading here.
By making your wrapper position: fixed, but making your header position: absolute and z-index: auto, you prevent a new stacking context from being created by the header.
The wrapper needs a width of 100%, so the header's and footer's width: 100% work. The wrapper will have a height of 0, which is both necessary (because it sits above your main content and thus must not obscure it) and not problematic (since the footer is still position: fixed at the bottom, and the wrapper itself has visible overflow).
In your example, it looks like this:
#fixed-wrapper {
position: fixed;
width: 100%;
}
#header {
position: absolute;
background-color: red;
width: 100%;
height: 150px;
top: 0;
}
#drop {
position: absolute;
top: 5px;
width: 100px;
background-color: green;
height: 400px;
z-index: 3;
}
#footer {
position: fixed;
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
<div id="fixed-wrapper">
<div id="header">
<div id="drop">
</div>
</div>
<div id="footer">
</div>
<div id="fixed-wrapper">
As for actually testing it on Discourse, I used http://discourse.opentechschool.org/ because it hasn't been updated yet to include your JavaScript workaround (and I happen to have an account there).
I clicked "reply" on a post, resized the composer so that it overlaps with the header, and clicked the (now only partially visible) "search" icon. As expected I couldn't see the search popup.
Then I put this into the JavaScript console:
$("<div id='fixed-wrapper' />").prependTo("#main")
.css({position:"fixed", width:"100%", zIndex: 1000}) // z-index 1000 is what the
// header used to have
.append( // move the header and footer
$("header.d-header, #reply-control") // to the wrapper and remove
.css({zIndex:"auto"}) // their z-indexes
);
$("header.d-header").css("position", "absolute") // stop the header from
// creating a stacking
// context
Now the search box is above the composer, which itself is still above the header, as desired.
If you can live with header being static, then I think this is what you are looking for.
#header {
position: static;
z-index: 1;
background-color: red;
width: 100%;
height: 150px;
top: 0;
}
#drop {
position: absolute;
top: 5px;
width: 100px;
background-color: green;
height: 400px;
z-index: 3;
}
#footer {
position: fixed;
z-index: 2;
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
<div id="header">
<div id="drop">
</div>
</div>
<div id="footer">
</div>

position an image based on a DIV inside another DIV

Ok I am running into a little problem positioning an image inside a DIV.
<div id="wholePage">
<img src="theImages/header_shadow_flip.png" id="hF" />
<div id="pageWrapper"><img src="theImages/header_shadow.png" id="bF" />
</div>
</div>
I have the following CSS for both DIVs
#wholePage {
position: relative;
width: 1000px;
padding: 0 10px;
padding-top: 35px;
margin: 0 auto;
}
#pageWrapper {
position: relative;
width: 960px;
padding: 0 10px;
padding-top: 37px;
margin: 0 auto;
}
The CSS for the top shadow, which works just fine. no need to change, is:
img#hF {
position: absolute;
left: 50px;
top: 56px;
z-index:2;
}
But the bottom footer image is giving me issue and the css is:
img#bF {
position: absolute;
left: 50px;
top: 1657px;
z-index:2;
}
Two examples of the page is below:
www.interfaithmedical.com/CheckSite/index.html
www.interfaithmedical.com/CheckSite/ms_gynecology.html
How do I align the bottom shadow image to match the pageWrapper DIV so it is positioned right below it? and doesn't position based on the page itself like it did on the second link. (On the second link, you can see it uses the original spacing and extends beyond page content)
Instead of setting the top: property of bF, try setting the bottom: property of bF to -4px. That way you aren't tied to your page being 1657px tall every time.
img#bF {
left: 50px;
position: absolute;
bottom: -4px;
z-index: 2;
}