I created an Ad prototype for a client. And I am unable have child show-up underneath parent, even though their z-indexes are correct.
Please take a look - http://www.charuv.com/prototype/i4.html
Steps to the issue
Window scroll - scroll up having your mouse over the black background.
Content scroll - scroll up having your mouse over the device-simulator, the one with a thick white border.
Having done above , you would see following visual glitch (not sure if its fixable)
CSS issue
Video inside #ad-box is overlapping the super-parent - #get-frame, but not the immediate parent #c1.
So the structure is like -- #get-frame -> #c1 -> #ad-box
CSS rules
Following are the CSS rules for above three
#get-frame {
margin: 6% auto 0;
overflow: auto;
border-width: 72px 25px 63px;
border-style: solid;
border-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, .8);
border-radius: 50px;
z-index: 999999;
position: relative
}
#c1 {
z-index: 99999;
background-position: left top;
background-attachment: fixed;
background-image: url("blue.jpg");
background-attachment: fixed
}
#ad-box {
position: fixed;
margin: 11.5% 26.2%;
top: 0;
left: 0;
overflow: auto;
z-index: 99999
}
Appreciate your time.
Remove position: relative; z-index: 99999; from #c1. This way there is no parent context and the fixed position #ad-box is free to interact with z-indexes elsewhere in the DOM structure.
Related
I'm going nuts! lol
I'm trying to position one image to the bottom of a page but it only works if the page is on large width...say 1360px, but when I shrink the with exactly to the 1206px and less, the body the image is pushed up creating a padding to the bottom as you can see in the image bellow (The image is represented by the green box).
The green image is positioned using this CSS:
body::after {
content: "";
width: 556px;
height: 767px;
position: absolute;
bottom: 0;
right: 10%;
display: block;
background-image: url("imagens/ghost-dog.png");
background-size: contain;
background-repeat: no-repeat;
z-index: -1;
}
And also there is a transparency (this purplish shadow) I added using other property that don't sticky to the bottom too. Using this CSS:
body::before {
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
And last to make my mind go round and round there is a background to the body but it fits ALL screen as expected:
body {
color: #fff;
font-size: 15px;
line-height: 21px;
font-family: "comfortaa-regular";
background-color: var(--cor-roxa);
background-image: url("imagens/logo-bg.svg");
background-repeat: repeat;
}
html, body {
height: 100%;
}
I've already tried to position body relative, but it didn't solve the issue. I don't know if it matter but I'm using bootstrap and my divs are organized like the image below:
Any suggestions?
Without any example to review this is difficult to determine a cause. That said, what immediately comes to mind is a child element with a margin is overflowing it's parent container pushing the window boundary but not it's parent containers boundary.
I would inspect your elements and toggle any margins to see if this has any effect.
If you add your code to a fiddle I can take a look and update this if I notice the issue.
How can I extend background color outside div?
My code:
.content-right{
background-color: blue;
padding: 40px;
position: relative;
}
.content-right:after{
position: absolute;
top: 0;
right: calc(1px - 100%);
width: 100%;
height: 100%;
background-color: red;
content: "";
}
jsfiddle
The problem is that I'm getting scroll (horizontal) and I don't want that... What I want is that red part to be extended after that black so it reaches the edge of the screen on any resolution but without scrolling... If I add overflow: hidden, it doesn't solve the problem.
Any ideas?
Thanks.
Move the pseudo to the left, and make the width of this 1000px.
Set a shadow on it to the right, with 1000px offset, and color red
.main{
background-color: #000;
height: 500px;
}
.content-right{
background-color: blue;
padding: 10px;
position: relative;
height: 100px;
}
.content-right:after{
position: absolute;
top: 0;
right: 0px;
width: 1000px;
height: 100%;
background-color: transparent;
box-shadow: 1000px 0px red;
content: "";
z-index: -1;
}
fiddle
Note: now the pseudo element will be probably outside of bounds, but to the left. Elements going outside of bounds to the left or upper side do not generate scrollbars.
On the other side, the shadow extends to the right. But the shadow is not taking into account when computing the layout, so this won't generate scrollbars either.
Quick Fix, but essentially I made the document have a overflow-x value of hidden so it will NEVER produce a horizontal scroll bar. If this is a problem, I can try to think of a better solution, but this is what I have so far.
JSFiddle: https://jsfiddle.net/m4f4x3bt/3/
html, body{
overflow-x: hidden;
}
I am working on a CSS3 tabs (Without JS) and having a big problem.
I am trying to make auto height of absolute div so that it can expand or shrink height accordinly but for some reasons it is not working.
I tried to give 100% height to my html,body but still not working. Without putting in more words, Here is JS fiddle.
Here is my relevant CSS:
.content {
background: #3404FC;
position: relative;
width: 100%;
height: 200px;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}
.content div {
position: absolute;
top: 0;
left: 0;
/* padding: 10px 40px; */
z-index: 1;
opacity: 0;
}
As you can see blue background is height so why it is not taking auto height. I tried 100% but it is not working at all.
Please help!
You can try this:
.content div{
position: relative;
}/**instead of position: absolute;
you can selected div visibility: visible:
and none-selected div visibility hidden;
Even though you've set the height to 100% of the parent div, in this case content it won't have a height. The reason is, all of your child elements are positioned absolute. This makes the elements go out of the normal flow making the height of the parent div to 0px.
Use this :
body,html,.tabs{height:100%;}
Because you are using margin in tabs, its height will be more thant 100%.
My Fiddle
http://jsfiddle.net/yjw46/2/
My Goal
I have this beautiful wheel of colors as a PNG. (I also have it as an SVG). When one of the colors is clicked, I want the WHOLE circle to change to that color. For example, if red is clicked, I want the whole wheel to turn red instead of colorful.
How I Intended to do it
I wanted to have a transparent (in the Fiddle it's semi-transparent, for debugging purposes) div in the shape of a circle (using border-radius) that will be DIRECTLY ON my color-wheel-image. When a color is pressed, I planned for the div to stop being tranparent, and (in a beautiful transition) turn to that color, making it look like the whole wheel has changed color.
Problem
I cannot get the div to cover the image.
So
I'd be glad to hear either why my technique didn't work, or a better technique, if you have one.
You was very close, simply chanage position: relative; to position: absolute; (on the div you want to have over the image) to fix the problem.
Now remember we need to have the parent as position: relative; or the absolute positioned div will not sit in the parent. You have already set this so its good to go.
Find more on position: absolute; here.
Demo here
#circleCover {
width: 300px;
height: 300px;
position: absolute;
top: 0px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here is a little demo to show what will happen without the relative position being set on the parent with the child having absolute.
Demo Without Relative
So you can see that the child is not staying within the parent.
And here is the parent with relative position.
Demo With Relative
As here the child does stay within the parent. This should help you understand why that is needed for the task you are trying to accomplish. Any questions please do just leave a comment and I will get back to you.
<div id="circleWrap">
<img src="http://y.emuze.co/circle.png" id="colorCircle"/>
<div id="circleCover" >
</div>
</div>
I have kept Your div one above the other
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
top:0px;
}
#circleWrap {
position: relative;
top: 0px;
width: 300px;
height: 300px;
margin: 0 auto;
}
#circleCover {
width: 300px;
height: 300px;
position: relative;
top: -302px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here it is in action: http://jsfiddle.net/yjw46/7/
Change your CSS slightly.
#circleCover {
top:-304px;
}
Fiddle
Just add position:absolute in #colorCircle
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
position:absolute;
}
I convert any div on my webpages to pop-up box by adding a class, turnIntoOverlay , to the div. (See JSFiddle)
.turnIntoOverlay {
position: fixed;
background-color: white;
top: 60px;
max-width: 680px;
z-index: 80;
border: 6px solid #BBB;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
max-height: 800px;
overflow: auto;
padding:10px;
}
Now when the pop up is displayed I also want to create a mask that puts up a faded layer(or mask) to the rest other page elements that appear below popup box. To create this mask, I resorted to pure css approach using psuedo selectors, so that the mask is shown/hidden simply when a popup box( a turnIntoOverlay element) is visible. I added the following css:
.turnIntoOverlay:after {
content: "";
background-color: whitesmoke;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
top: 0;
left: 0;
}
Everything works fine except that the mask appears on the pop up as well even when I keep the z-index lower than of popup. Also to my surprise, it works only when z-index=-1.
Can you please suggest how to rectify this ?
See JSFiddle here
The problem is the stacking context. The :after content can not be below it's parent, except if the parent would be out of the stacking context which in your case is no option. z-index: -1 works because it's a special case and has priority over the parents content. That's why it does not effect the text, but effects background and border. See the list on Stacking Contexts. Your :after { z-index: -1 } is nr. 2 in the list.
Your only option would be using an additional wrapper:
<div class="turnIntoOverlay"><div>this div is convertible to pop up!<input/></div></div>
moving your current styles for .turnIntoOverlay to .turnIntoOverlay > div and applying the overlay to the outer div with a positive z-index:
.turnIntoOverlay:after {
z-index: 1;
}
Here is a demo.
Unfortunately IE8 and below are buggy on that. Also they do not know opacity and using -ms-filter does not work on elements without layout like pseudo classes :before and :after are.
Of course, if you'd use an additional wrapper anyway, you could just give the other wrapper the background-color. No need for :after then:
.turnIntoOverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: skyblue; /* for old browsers */
background-color: rgba(135, 206, 235, 0.4);
}
Compared to the pseudo class approach, this includes a little fix for IE8 and below. Can be made even better by using a transparent png which is applied to IE. With that, it looks quite the same in every browser (after IE6 I would say).
Here is a demo.
My solution is to use both :before and :after to solve your problem:
.turnIntoOverlay {
position: fixed;
background-color: white;
top: 60px;
max-width: 680px;
border: 6px solid #BBB;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
max-height: 800px;
overflow: auto;
padding:10px;
z-index: 80;
}
.turnIntoOverlay:before {
content: "";
background-color: skyblue;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.4;
top: 0;
left: 0;
}
.turnIntoOverlay:after{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
z-index: -1;
content: "";
}
JSFiddle
I took out the position: fixed from .turnIntoOverlay and now it works.