Code pen showcasing problem.
https://s.codepen.io/NoMan2000/debug/rdPEYJ/xnrabdnqJadA
I apologize for the rather gnarly HTML, but this is output from a next.js project so the bloated mess is part and parcel of that.
Anyway, the problem can be seen in the element #header-menu-buttonList. The idea is pretty simple, a menu that goes underneath the main grid element. But for whatever reason, it just sits there on the page.
You can pick it up in the debug tools and see that it has a width and a height. Messing with its z-index doesn't make the object visible, only removing the position: absolute makes it visible on the page, but that opens up a whole host of other issues.
So, anyone know:
1.) Why the heck it's doing that?
2.) How to either fix it or work around it?
Thanks for the rubber-ducking. :)
So the issue is that the parent element is positioned absolutely, and the child element is positioned absolutely. I'm not up to snuff on all my CSS rules, but this appears to keep it in the DOM but not render it visible.
The solution is to set the child #header-menu-buttonList to position: static and the parent #header-menu-button to position:absolute.
Related
I ran into this issue while implementing a sticky footer solution. I have the footer working well, but my body element which encompasses everything within the tag just will not auto-extend beyond a random point further down that can only be reached by scrolling down (it's a lengthy page). My intention is for the body container (does that sound morbid or what?) to auto extend past all the div elements it contains. Isn't that what it's supposed to be doing? Right now there are still div elements sitting further down from where it ends, and the footer is sitting in the middle of my page right below it. If I can't achieve this behavior, I'll have to set the body to a fixed position in css, which I don't want to do.
Using the following CSS styling doesn't work, probably because my content extends beyond a page.
html, body {min-height: 100%; height: 100%;}
Can someone articulate what the most likely issues could be? Also, feel free to make any constructive comments on my code. This is my first web project.
Here's a link to my HTML code on CodePaste: HTML Code
And here's a link to my CSS code: CSS Code
Lastly, a link to a screenshot of my webpage showing the issue. Screenshot
The green bar is the footer, and the red border is the body element styled in css so it can be viewed. You'll see it ends right after the picture.
I'm pretty sure your main problem is setting the height of the body tag. Try not giving it a height (no max-height or height tags) or giving it height: auto to make it expand as its contents.
It could also be that you are setting child elements to positon: absolute which means that the parent will collapse to the size of whatever non-absolute elements are inside it.
Also, why the <p1> tags? They should be just <p>.
Code criticism:
It was extremely difficult to figure out what the problem was and I'm not sure that I gave the correct solution because of the way you showed your code. In future, try to give your code as a JSFiddle or a Codepen.
Also, consider using a CSS framework which will reduce the amount of CSS code you write a lot. I would suggest Bootstrap or Materialize but Bootstrap is more widely used.
Don't forget to follow CSS guidelines which will make your code more readable.
You could stretch the element to the full height of the window using vh.
.container{
height: 100vh;
}
You could then position your footer to the bottom using absolute position.
footer{
position: absolute;
bottom: 0;
}
I've used this in the past for full page landing pages that aren't meant to scroll.
I don't exactly know what the question is asking, but I experimented a bit and figured that if you remove the 1 from the <p1> so you would have a normal <p> tag, it moves the text up completely. I have a very rough JS Fiddle.
Thanks to all who contributed. Based on suggestions from Sankarsh and Ori, I was able to solve the problem. Once I changed my div to just as they suggested, I noticed it began functioning as I intended and forcing the parent element down beneath it. Unfortunately, that only solved the problem for that element alone. That led to me discovering the element had a default "static" position, while most of my other elements were set to "absolute". After changing the positions of the bulk of my content to "relative" or "static", everything is working as intended!
TLDR: If you want a child element to stay within the boundaries of its parent element, you need to set the child's position to "static" or "relative". You cannot use "absolute". This way, instead of overflowing beyond the border of the parent, the child will automatically extend the parent's border to its intended position.
Hi everybody I have a school project where I am trying to animate some objects and I got the css transitions to work but I don't want the other elements to be affected by the transition. I have looked at other examples that talk about using css positioning to overcome this problem but when I adding positioning to my example the images start twitching and the other the html elements go all over the place. I am attaching my jsbin. I am using angularjs to loop through an api that I am using, I don't know if that is affecting it somehow?
http://jsbin.com/opEhAVi/1/edit
The element that is animated needs to be absolutely positioned not to affect the other elements when it for example changes size.
A way to handle it is to make a list of relatively positioned elements. These elements will just be containers to achieve the layout you desire. Each element then contains an absolutely positioned element. This is the content, the element to be animated. As it is absolutely positioned it will not affect the other elements.
I made some quick changes to your example that will hopefully guide you further:
http://jsbin.com/ogAvAZUm/2/edit
So I know there are a plethora of questions about position fixed/relative/absolute in relation with z-index, but I still couldn't figure out my question using those.
Essentially I have a header that is fixed. It works perfectly fine, everything goes behind it when scrolling down the page.
I recently wanted to add links to div ids, but in order to account for the header, I had to add the following code where link is the parent element, and then linkTo is the class of something with an ID that we actually link to. This functionality works completely, providing the correct offset so that the header is above the div we want.
.link {position: relative;}
.linkTo {position: absolute; top: -80px;}
The problem with this, is that for some reason now my div is behind everything on the page. I can still see it but the text and images are in front.
I've tried adding z-index to my header (of like 9999) but it isn't working. I don't understand why adding position relative would mess up the order of how things are displayed.
I'd like to provide an example, but my code is rather large. If this isn't enough I can try to make a jfiddle later.
Add position: relative; z-index:9999 to the parent element it will keep this element stick inside the menu.
As Ganesh said, adding position: relative to the parent element of the header was the starting step. After that adding z-index to the same parent element fixed the problem completely.
Check for a lower z-index on a parent element, it appears to override the z-index of children.
I've run into z-index issues in the past with drop down menus and jquery UI tabs. I thought it had something to do with the stacking effects created us rules like opacity or transition, but for me the problem was a parent element having a lower z-index than a child element.
When I made my HTNL page, it looked perfect, but all of a sudden, I've been getting this huge white space on the bottom of my page. you can see it at http://thomaswd.com/pearinc2. How do I get rid of this?! My stylesheet's at http://thomaswd.com/pearinc2/style.css
If you look at the HTML element with the class back-iphone4s you'll notice it's positioned relatively using CSS.
If you remove the position: relative portion from the CSS rules for .back-iphone4s you'll notice it appears where your white space is.
Using position: relative like this is always horrible, white space appears where the element would have been if it wasn't positioned relatively.
What I would recommend is adding position: relative to the div with devices as its class, then use position: absolute; on .back-iphone4s and set it's position using that method. This way the back-iphone4s element is positioned relatively to it's parent, not relatively to where it would be in the normal document flow.
There are are a number of other ways you could solve this too, at I glance I would be very tempted to just turn those two iphones into one image, less HTML, less CSS and less images to download, but it appears you may have inteneded them to be seperate for a purpose, so maybe that's not a viable solution.
... phew, hope that makes sense, let me know if now.
I just had a quick look at your style, what I saw is technically very ugly.
You set all main elements with position:absolute and made them independent from context and content-flow. And because they are absolute, you have to give them a height - and that causes in things like that ugly white-space.
I would say you have the wrong concept of styling / structuring the page.
Try to use "position:absolute" very rare!
Give a height to the .devices class:
.devices {height: 520px;}
The nav works the same in every browser i've tested on a mac and pc; however, I cant for the life of me figure out why in IE7 the nav is appearing under the content in the main content block. Check out http://obs4.dynapp.net/ to see the problem, it only exist in IE7. Check out the source if your interested in helping out with the problem. I dunno, I've spent hours staring at html/css and cant figure anything out.
http://obs4.dynapp.net/
This is a seriously annoying IE7 bug. It occurs because positioned elements later in the DOM will be given priority over those earlier in the DOM, regardless of z-index status.
This article will explain how to fix it: http://thedesignspace.net/MT2archives/000763.html
Basically, add position and z-index to the least common ancestor. So, if your header and content are both contained in a container, add position and z-index to that container. If they're direct children of the body, add it to the body.
Hope that helps.
z-indexing is weird with IE7. You have position: absolute for your nav. You have position: relative for your content. Yes, z-indexing should work where your position doesn't matter, but IE7 will take that into affect and give you two different "stacks" for z-indexes so absolute and relative positioned elements do not interact with each other. Try giving your nav a position: relative instead and then readjusting your css accordingly.