I am faced with a situation where I am struggling to find a solution. So I have two sections. Within the top section, I have an image which I have placed at the bottom using flex. The idea is simple, as I scroll down, the image should slide up into place.
I have got this to work, but I have noticed that when the image is within section 2, it sits on top of this section, instead of behind it. Ideally, you should not be able to see any of this image within section 2. This JSFiddle demonstrates my problem.
So I have found a way to overcome this. I essentially gave each section a relative position and then set a z-index.
#sectionTwo {
position: relative;
z-index: -1000;
}
#sectionThree {
position: relative;
z-index:1000;
background: #ccc;
}
This seemed to fix the problem, but one thing I do not like is that when I try to inspect element, it seems to always focus on the body element rather than the section I select.
Anyways, with that fix in place, I was faced with another problem. The section also needed a box at the top, that would overlap into the section above it. I made a quick sketch to demonstrate what I am after
I have noticed however that setting the z-index is now causing me problems. I can't get the box to overlap section one.
Here is my latest JSFiddle which demonstrates where I am at.
So really I am after advice on whether I am handling the z-index correctly, and how I can get the box overlapping section one.
Thanks
Going into positive zindex values seem to fix your problems:
#sectionOne {
position: relative;
z-index: 10;
}
#sectionTwo {
position: relative;
z-index: 20;
}
#sectionThree {
position: relative;
z-index: 30;
}
Is this what you are after? If you are wanting the elements in section 2 to be on top of section 1, you will need to give section 2 a higher 7 index than section 1.
#sectionOne {
background: #ccc;
z-index: 2;
}
#sectionTwo {
position: relative;
z-index: 3;
}
#sectionThree {
position: relative;
z-index:1;
background: #ccc;
}
Related
So I am having a z-index problem on my website, take a look at: https://displee.com/osrs-store
If you look at the header of each step you, you will notice that only step 3 has a ribbon and step 1 and 2 do not (if you don't see this, then try to zoom-in). Step 1 and 2 also should have a ribbon.
I cannot seem to fix it, I played around with z-index on all elements and using position relative but it is not working. I think somehow it has to do with the height of my content or something.
I think you are having a stacking issue with your .panel elements stacking context. Your are trying to place a the <header>'s :before behind it's parent - the .panel.
You can't really stack an element behinds it's parent I think, you set the the z-index to -1 maybe trying to place the element behind it's parent but are clearly running into issues.
What you probably need to do is place the the header:before puesdo element next to the white content box (the .panel) instead of behind it by simply reducing it's size, and fixing some minor issues.
In your stylesheet (https://displee.com/css/home_style.css) update theses 2 styles starting around line 548:
CSS
.ribbon > header:before { /*Update selector*/
bottom: -24px;
content: "";
display: block;
position: absolute;
}
.ribbon > header:before { /*Update selector*/
border-color: transparent #3b4d56 transparent transparent;
border-style: solid;
border-width: 0 21px 24px 0; /*Update size*/
height: 0;
left: 0; /*Update to zero*/
width: 0;
z-index: 0; /*Update to zero*/
}
I see this as the result. I believe this fixes your having to zoom in issue also.
If I add height: 0; to my body element, then everything is fixed. Does anyone knows why this fixes it. Also, I don't think this is the right way to fix it?
I'm having some trouble getting a specific look that I am after.
I have the basic Wordpress Twenty-Fifteen theme applied and I'm trying to get a 200px wide red bar to appear down the right hand side of the screen.
The bar is made of a 200x1px image that is repeated.
The problem is:
A.) If I set this as a "Background-image" then the repeat works, but
I cannot get the image on top.
B.) If I set the image as an IMG
inside of a DIV, then I can get the image on top, but not to repeat.
Can anyone help me combine these 2 into one result, repeated image-y and image on top?
You can see my site here: http://u64.ca/
Try this, add it to your css.
This will affect everything the comes directly inside the #main tag.
#main > * {
margin-right: 200px;
}
Or you could apply a border right to the .site-content and lose the background iamge.
.site-content {
border-right: 189px solid #db0f12;
}
I'd use a pseudo-element something like:
main {
position:relative;
}
main:after {
content: "";
width: 189px;
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: #DB0F12;
}
Currently, I'm working with on http://rccsite.wpengine.com/rcc-remediate/. The page has a slider that has text "Building across Auckland" and a "Read more" button.
I've spent more than an hour already trying to figure out why the nested div that has a class "slide-text" is not bringing the text and the link on the front. Currently the image with class "graphic-square" is on the front that has z-index of 1 it is needed to be on top on the image but not on the pieces of text of the slider.
I tried to add:
.slide-text {
z-index: 200;
position: absolute;
top: 30px;
right: 100px;
max-width: 190px;
}
Already made the z-index on 200 its not getting the desired output.
However, I successfully made the div tag on front, on the right that says "Building better".
Is there anyway to achieve this?
Why is the pager is working when z-index is applied but not on the slide text? I think, I'm missing something here.
Any help would be greatly appreciated.
The issue is just because of the below code:
<img src="http://rccsite.wpengine.com/wp-content/themes/genesis-child-jed/images/graphics-square.png" class="graphics-square">
.graphics-square {
display: block; /* Make it display: none; */
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
z-index: 1; /* Make it z-index: 0; */
}
Just hide the .graphics-square class and things will work OR you can set it's z-index: 0;
Try it at your end and let us know.
I already figured it out! I have to split the the graphics-square image in two parts. Removed the middle part of the image, allowing the text to be on front. And it worked.
Thanks for the idea Matt.
With the help of the nice people here I got a reasonably decent mock-up: http://jsfiddle.net/CecilWesterhof/4kLwK/2
In the middle there is a main document and besides this there is a comment section.
It looks reasonable, but there are two problems with it.
When the document becomes less high, the position of the comments is not really correct. It should be top, middle and bottom. But currently (in FireFox, which is the most important) when the document height is lowered the middle section gets into the bottom section.
What should I change in this code?
The other problem is the next button. I would like to have it on the right, but I did not get this to work.
I tried:
button.next {
background: #84a0C4;
border-radius: 10px;
clear: both;
color: #FFFFFF;
float: right;
font-size: 200%;
overflow: hidden;
}
But that places the button at the right, but also makes the comment section bigger and gives you a scrollbar when you do not need one.
EDIT
For the button problem I found a hack. Using the above style and adding a few breaks like:
<button class="next" id="next">Next</button>
<br/><br/><br/>
solves the button problem. Not really neat, so if there is a better way …
To see the problem with the float without the hack:
How it looks in FF under Linux without the hack http://decebal.nl/images/2014-04-30ButtonRightProblem.png
About the alignment problem, this picture displays it:
wrong alignment http://decebal.nl/images/2014-04-30AlignProblem.png
Questioning is merged into ‘Always check for a reference’ instead of being halfway between ‘Be short …’ and ‘Always check …’.
You have to pick minimum min-height for your comment div, as you will always have an issue with that.
Also I've found some weird positioning logic in your css file including tranformations of Y scale... No idea why you need that. It'll probably cause many troubles in IE browsers.
Anyway, here is the fiddle -> http://jsfiddle.net/4kLwK/7/
and in a summary my modifications of the CSS file:
added:
#comment
{ position:relative;
min-height:250px;
height:100%;
}
modified:
.middle {
position: absolute;
border:1px solid red;
top: 40%;
}
.bottom {
position: absolute;
bottom: 0px;
}
Edit:
With one little addition it did the trick.
.bottom {
position: absolute;
bottom: 0px;
width: 99%; /*
In this way the button stays right.
Our website engine uses 960.gs grid system and I am trying to modify it to 3 columns Fixed(100px)-Fluid(max to width)-Fixed(100px) view. Unfortunately all 960.gs online generators makes just or full-fixed or full-fluid grids. So I am trying modify originally generated full-fluid grid to this view:
<------------100%--------------->
======== =============== ========
| fixed| |max to screen| |fixed |
======== =============== ========
<-100px> <-100px>
The Code (after modification):
http://jsfiddle.net/vZm8x/
Problem 1) I am not sure how to make central content area max to left
on the screen. Because width:auto; doesn't work at all, width:100% just wrapping divs.
Problem 2) after fixed to 100px all div it continues wrapping down
anything. (display:inline; doesn't help any ideas?)
My question is: Is that possible to modify 960.gs template according to our needs? If yes please give me any advice to fix the problems? Thank you in advance!
With fixed-width side columns, it's actually very easy. You're going to want to use floats, and may need to do a faux columns trick, depending on your specific design needs.
You'll want something along the lines of:
<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>
and:
div {
/* border-box, to make sure "width" is our intended width */
-moz-box-sizing: border-box; /* Firefox still uses prefix */
box-sizing: border-box;
}
.left {
float: left;
width: 100px;
background: #f00;
}
.right {
float: right;
width: 100px;
background: #00f;
}
.middle {
width: 100%;
padding: 0 100px;
background: #ccc;
}
See it in action here (this is without the faux column effect, but should give you a starting point). If you change the width of the section with the output, you'll see that the columns stay put, and the content stays within the bounds of the outer columns.
The content column needs to be last, because it's still in the document flow, so the right column would end up below the content.
Alternatively, you can use position: absolute; on your side columns with something like this:
.wrapper {
position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */
}
.left {
position: absolute;
top: 0;
left: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.middle {
padding: 0 100px;
}
div {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
These tricks will work in IE8+, Firefox, Chrome, Safari, and Opera. IE7 might have issues due to using the W3C box model ("content-box") and not recognizing the box-sizing CSS, but there are a few tricks to make it work if you need it. IE6 should be okay, because it uses "border-box" based box model by default. (You may need to play with z-index to get IE to behave. If so, then set .middle{ position: relative; z-index: 1} and add z-index: 2 to the left and right columns.)
The position: absolute trick does have the advantage over the float one in that your sidebars can appear before or after the content div, making it the potentially more semantic option.
The reason these work is because a) your side columns are fixed, so we just set the padding to the width of those columns, and b) position: absolute and float: [left/right] take the elements out of the document flow, which means that as far as the document is concerned, they aren't there and take no space. This allows other elements to move to where those elements used to be, layering them over top of each other.