Position Absolute and Z-Index Not Stacking Over Other Elements - html

I am having a very novice issue with positioning.
I cannot for the life of me figure out why I can't get the blue section at the bottom of my page to be positioned on top of all other elements with absolute positioning and z-index.
It seems like the div with the image is causing the issue but i'm not sure why. The layout logic seems simple.
I have a div on the left with a class of 'left-frame' that acts as a container for the left content. This div is styled as follows:
.left-frame
{
display: inline-block;
height: 100vh;
width: 45vw;
position: relative;
vertical-align: top;
}
(I also don't understand why I had to specify the vertical align. Without it the main image div and the left frame div were misaligned, but that's a separate question)
The right side of the layout is just a div with a class of main-image that has an img element inside and is meant to take up the rest of the screen. Styled as follows:
.main-image
{
width: 54vw;
height: 100vh;
display: inline-block;
}
.main-image img
{
width: 100%;
height: 100%;
object-fit: cover;
}
Finally, the bottom blue part is supposed to end up styled as a banner with contact information sitting on top of all other elements. Currently it is styled as follows:
.contacts__body
{
background: var(--main-blue);
width: 100vw;
position: absolute;
z-index: 10;
}
The absolute positioning with z-index is not functioning properly. I know it's something I'm doing wrong but I can't understand why.
Below is the final design I'm trying to re-create for reference.
Also the full code is here in a codepen with different images. https://codepen.io/dansoutar/pen/OJJJmdm?editors=1000
final shot
Thanks for any insights.

Related

Position of absolute element inside bootstrap container

I have a full-width cover image. Inside of that, I have a bootstrap container class with an absolute positioned image that sits on top of the cover image. What I would like to to do is have that image positioned to the right-hand side of the container only.
Here is my code:
<div id="header">
<div class="container">
<img src="header-icon.png" class="header-icon" />
</div>
</div>
#header {
background-image: url('cover.jpg');
background-size: cover;
height: 300px;
position: relative;
.header-icon {
position: absolute;
bottom: 0;
}
}
Of course, when I add right: 0 to the header-icon, it aligns outside the container. I could, of course, create media queries and try and position the icon based on screen size, but I'm wondering if a better way to do it exists.
I have also tried to make the icon relative to the container, but this seems to break what I am trying to achieve.
I'm not 100% sure what you are trying to achieve, but it sounds like you want right: 0 to align the image to the right of the container and not the header.
position: absolute will position an element absolutely according to the first parent element that is not positioned statically. Right now, you have #header with relative position, but .container still has static position. Therefore, you want to apply position: relative to the container:
#header .container {
position: relative;
}
Also, the code you posted seems to be missing a </div>.
Is this what you are looking for jsfiddle, this is the code i added
#header .container {
position: relative;
height: 400px;
}

div nested in div not clickable

I have one notification css. Unfortunately, have for one wrap body of the notification.
This wrap always shows on all pages, but if the notification is closed, the block is active and it gets impossible to click anything on the site.
.notice-wrap {
display: block;
position: fixed;
top: 0px;
z-index: 9999;
width: 100%;
height: 100%;
}
I could not find a better solution for wrapping the div with full width and responsive, only for width and height set 100%.
I need full width and height, because in the .notice-wrap I have one div for .notice-item-wrapper which has background-color: rgba(0, 0, 0, 0.50);.
But if .notice-wrap is not full width and height, the bg color is not full width either.
How can I click a div underneath another div?
I tried display:inline-block for .notice-wrap, but it doesn't work.
I think overlapping every page with a full-page div is not a good idea, but adding pointer-events: none to its style will make the elements beneath it clickable.
This WILL NOT work on IE<11
.notice-wrap {
pointer-events: none;
display: block;
position: fixed;
top: 0px;
z-index: 9999;
width: 100%;
height: 100%;
}
Without seeing the code. Change your height to the height of the notice div. ex: height:90px. You've essentially created a full height and full width div, that sits on top of everything because of your z-index, which would make everything underneath unable to be clicked.

when overlapping an img-tag it renders background / border behind and text in front of img

For a simple landing page I wanted to let some text box overlap an header image. To make it simple, I just have a structure like:
<header>
<img src="path/to/img.png" />
<h1>Awesome headline</h1>
</header>
All elements are set to display:block and the h1 is dragged inside the image with a negative margin. I also gave the headline some padding and background:white.
Now the problem: The headline text is shown on top of the image but the background colour is behind it! You can see an example here: https://jsfiddle.net/cv12evLn/
My guess is, that a browser renders all sibling blocks in layers, starting with all backgrounds and borders, then rendering images (img-tags) and finally text on top of everything else.
Is that right? And why the actual… I mean, that seems crazy unexpected to me.
To solve the issue, I've put the headline in a wrapper and set this to position:absolute. See here for a live example: https://jsfiddle.net/f5sd1u6o/
Use position:relative rather than negative margin. Then the z-index works automatically.
#container {
width: 500px;
height: 300px;
margin: auto;
}
#container img {
display: block;
width: 100%;
}
#container h1 {
display: block;
width: 50%;
height: 1em;
margin: auto;
padding: .5em 1em 1em;
font-size: 3rem;
background: yellow;
text-align: center;
border: 1px solid red;
position: relative;
top: -4.6rem;
}
<div id="container">
<img src="//placekitten.com/500/300">
<h1>
headline
</h1>
</div>
To get the Z-index to work, you need to apply position:relative anyway but you can still use negative margin if that is a design requirement.
JSfiddle demo (with negative margin)
Basically, backgrounds are rendered first before anything else (as I understand it) so they always come at the bottom of the stacking order. You just need to create a new stacking context and changing the position property does that.
As it happens so does changing the opacity of the element so a quick fix is to set opacity:.9999;
JSfiddle Demo (opacity 'hack')

CSS: Text beneath image does not break to new line

I have an absolute positioned div. Inside this div there is an image and underneath it, a caption. Now I want the caption to break to new a line if it reaches 95% width of the image.
But I can't get it to work. The text (no matter what width I say), always moves the image to the left like it would have no breaks.
I made a fiddle for this:
http://jsfiddle.net/hw7t7xyn/1/
The image is set to
right: 0;
top: 10px;
But since the text is too long it moves to the left.
Also the div.caption does not seem to adopt the parents div width.
Can anybody help me out here? Maybe it's a problem of the HTML setup or the CSS, I have no idea anymore, but it's driving me crazy.
Update: Sorry, I did forget to mention that I don't know the dimensions of the image. Is there a possible way to do this without javascript?
I think you just need to add a width to the main div (the one that's absolute positioned).
I added a width of 260px (same as the image)
When I did this, it aligned the div to the far right as you have right:0px is this correct?
http://jsfiddle.net/hw7t7xyn/5/
div.photo-wrap {
overflow: hidden;
position: absolute;
text-align: left;
width:260px;
}
img.photo {
position: relative;
display: block;
}
div.caption {
margin-top: 7px;
width: 95%;
position: relative;
display: inline-bock;
}
give width to photo-wrap

sub-div flys out of main div even after applying clearfix with correct relative & absolute positioning

just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.
Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it.
here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image.
What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word?
Below is my code and any help would be much appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%; /*not sure I'm doing the right thing here either*/
height: 40%; /*not sure I'm doing the right thing here either*/
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
Few things:
Absolutely positioned elements are taken out of normal flow, hence doesn't affect the size of their parent.
Since they're out of normal flow, float has no effect on them (as far as i know)
Absolutely positioned elements shrink wraps to fit it's contents unless width and height is set explicitly or stretched using the top, right, bottom & left properties.
Now your parent div #history-content doesn't have any height set, and all of it's content of are absolutely positioned, So it's not visible (height 0)
applying a proper height for the parent seems to fix the issues for me.
Side note: unlike what you think, you don't have two absolutely positioned<div>'s, #stamp img absolutely positions the <img> inside div#stamp, for the same reason mentioned above, div#stamp is also invisible (height 0) you'll get the same result with and without it. And without floats
As others have said, float doesn't have an effect on absolute positioned elements, and so technically you don't need clearfix in this case.
I'm not exactly sure why your logo is positioned outside the outermost container #history-content, but you could try to put a border around the #history-content to further troubleshoot.
EDIT: Maybe check your hero image dimension, is it smaller than 1608px in width?
<div id="history-content">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
I've changed your CSS below
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px; /*set whatever minimum height you wish*/
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp {
display: block;
position: absolute;
right: 100px;
top: 20px;
width: 10%; /*set width of image in containter instead*/
height: auto;
}
#stamp img {
max-width: 100%; /*image width will not stretch beyond 100% of container*/
height: auto;
}
JSFiddle: http://jsfiddle.net/5L9WL/3/