I was fiddling around with a web site I am developing, attempting to fix some odd IE7 bugs, since this is an internal project and IE7 is the standard browser. I ended up adding "position: relative" to correct a couple IE-specific layout problems, but I seem to have made things worse in FF/Chrome (I consider myself more of a systems programmer, but my current responsibilities involve more of a web focus unfortunately).
The specific problem is that the "position: relative" elements ended up making some of my links, which were floated to the right, unclickable. I've created a simple test page that I hope will explain this better than I can with words: http://jsfiddle.net/gBchZ/.
I will sort through this mess eventually, but I was hoping that someone could explain the reason behind my links getting hidden behind the position: relative elements.
Without having the link of the site is difficult to tell exactly what is wrong. But in any case, a solution could be to use z-index for the parent of a. For example z-index:100. Keep in mind that z-index works only with positioned elements, so you can use position:relative.
Demo based on your example: http://jsfiddle.net/gBchZ/3/
This is because the .content divs are covering the right-box (in your demo). If you add a margin-right to those divs the a becomes 'reachable:'
.content
{
position: relative;
margin-right: 20%;
}
JS Fiddle demo
You could also use position: absolute; to make the a element appear 'higher' in the z-index, though this becomes rather complex:
#rightBox
{
background-color: green;
width: 25px;
height: 25px;
position: absolute;
right: 0;
top: 50%;
margin: -20px .5em .5em .5em;
padding: .5em;
}
JS Fiddle demo
#David’s correct in that the position: relative on the .content items is giving them a z-index, meaning they’re “on top” of the link you’ve floated to the right.
I think a better solution though is to add position: relative; to the link you’ve floated right as well, and give it a z-index higher than .content:
#rightBox
{
...
position: relative;
z-index: 2;
}
.content
{
position: relative;
z-index: 1;
}
See http://jsfiddle.net/gBchZ/6/
Related
I've lately come across a weird issue, where a div like the following is not behaving like expected in most browsers (Chrome, Edge) as it does in Firefox:
footer > div {
display: flex;
position: absolute;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
justify-content: flex-end;
align-items: center;
}
footer {
position: relative;
display: table-row;
height: 40px;
background-color: gray;
}
I expect the div inside the footer to fill it's parent div so an element inside that div tag can be aligned vertically.
To make it work in chrome, I included the following rule
#media screen and (-webkit-min-device-pixel-ratio:0) {
footer > div { position:relative; }
}
The idea is to vertically align some elements in the footer without having to enter a specific value for its height (yes I'm more of a programmer, so I'm trying my best to avoid having to put the same value on multiple places in case it needs to be changed). How is this done correctly across multiple browsers?
The final solution just has to be supported in current versions of Chrome and Firefox so ignore all that IE not supporting CSS3 and HTML5 bull that most of other people have to consider. I'd also rather not do the styling using JS including JQuery since I feel like the layout is such a basic thing it should be possible to do without any of it.
If needed, you can also check out this jsFiddle which shows the problem in the context of the layout.
I suppose this isn't really necessary but if you want to, you can also check out the source code (it's a Spring webapp using Thymeleaf) on GitHub.
Lastly, if you feel like it, feel free to comment on other flaws in the design. This is a project I'm doing for an University course so I'm always open to improvements.
Thank you very much!
You could solve this by replacing the following for footer > div:
top: 0;
right: 0;
left: 0;
bottom: 0;
..with:
width: 100%;
height: inherit;
You'll find an updated Fiddle here. The solution seems to be working in all the latest browsers.
I need some help with some CSS issues.
I am trying to create a series of buttons using div tags. The problem is that they are all stacking together as one.
The code is at http://codepen.io/CliffTam/pen/gadEaq
Can someone take a look at the code and advice me on how to fix this?
I try creating a separate DIV tag class 'box' and set display:block.
div.box {
margin: 5px;
padding: 5px;
height: auto;
width: auto;
display: block;
position: absolute;
}
Yet, they are still staying together.
Thanks!
Cliff
Change the position: absolute; to position: relative;, for both the .box and .profile-image that stacks them.
By absolutely positioning them, they were sticking to the top left, meaning all were essentially merging into one...
http://codepen.io/samuidavid/pen/JYaVOQ
I have two DIVs and the one that comes last in the source code appears on top on the webpage. I want them to display in their natural order. First DIV on top, second DIV below.
HTML
<div id="intro">
<h2>Gteaay Presents</h2>
<h1 id="header-bigger">Producer World</h1>
<p class="header-smaller">For Producers by producers. A guide for choosing the right music composing software for you!</p>
</div>
<div id="nav">
<ul>
<li>New Products</li>
<li>Inspiration</li>
<li>Coupons</li>
</ul>
</div>
CSS
#intro {
text-align: center;
margin: 2em 0em 1em;
background-image: url('images/gloomy-stripes-blue-lively.jpg');
padding: 0;
border-top: medium #0B9696 solid;
border-bottom: medium #0B9696 solid;
position: fixed;
width: 100%;
}
#nav {
background-color: black;
height: 3em;
position: fixed;
width: 100%;
}
PS This happened AFTER I made them position: fixed; Before that they were fine.
EDIT Actually DIV #2 appears on top of DIV #1 now.
When you use position: absolute or position: fixed, you are removing an element from the document flow. So in this case, the #intro is removed from the flow and the #nav moves into its place (try removing position: fixed from #nav only and see the difference).
Now #nav gets its own position: fixed, which removes that from the flow too, locking it in position. Only thing is, that location is the new, top-aligned one brought on by #intro having been taken out of the flow.
To solve the problem, you should have a single container holding both #intro and #nav, and apply the position: fixed to the container only.
Side-note: You're using <h*> tags wrong. "Gteaay Presents" should, at best, be in a <div> with bigger font-size.
Your DIV #2 now appears on top of DIV #1 because DIV #2 is the last one declared in your HTML. to solve this problem, just add in your CSS (DIV #2): z-index:-1; or to DIV #1: z-index:1;
Hope it helps.
This is a direct solution to solving the problem and it takes the essential part of Niet's answer and incorporates it into my solution here.
The reason this was "not working" was because when you use position: absolute or position: fixed, you are removing an element from the document flow. So in this case, the #intro is removed from the flow and the #nav moves into its place.
Also when you use a position: fixed we can also add a specificposition using attributes like top, leftetc.
So the solution is to give them a specific fixed position according to they're new position in the document flow.
e.g. for #intro top: 10% or top: 10em; or top: 10px; and then of course give #nav another position that doesn't overlap. e.g. top: 20% or top: 20em or top: 20px
PS I don't know if those values actually look right or work but I'm just demostrating the solution.
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
This is very frustrating....
http://jsfiddle.net/RRnm8/
<div id="target">
<p>Text to appear in front</p>
</div>
#target {
position: relative;
background: red;
width: 200px;
height: 200px;
padding: 45px;
}
#target:before {
content: "content from before, should be behind #target";
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background: cyan;
z-index: -1;
}
works well on every browser, except for IE8...
it should be displayed like this:
But in IE8 you get this :'(
So the question would be how to get this to work properly in IE8?
Please provide the answer as a real working example at jsfiddle...
This user has the exact same problem. He got no answer but this which clearly doesn't work, hence my kind request for a working example demonstrating it on jsfiddle
This issue appears to be related to how IE handles the z-index stack. Where FF and Chrome treats elements with z-index document-wide, in IE, as you likely know, z-index is based upon the parent's z-index first.
I think the :before content complicates this issue and, despite it having a negative z-index, is it within the parent element. The element its index is being compared with is not the parent div, as it would be in FF or Chrome, but the content inside the div, the p element. The p element is not a block and shares the z-index of the parent div as well, so it cannot be below the :before content.
The solution is to make an inner div, or give the p element relative positioning and styling.
See: http://jsfiddle.net/RRnm8/3/