I have a CSS class which outputs a line after a title
This works in Safari and Chrome but in Firefox the line is not appearing.
My Code:
.sidebar h2 {
color: #f7f7f7;
width: 100%;
font-size: 24px;
position: relative;
}
.sidebar h2 span {
background-color: #40d1b0;
padding-right: 2px;
}
.sidebar h2::after {
content:"";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.22em;
border-top: 1px solid rgba(0,0,0,0.10);
z-index: -1;
}
<h2><span>Show</span></h2>
The container div has a class of Sidebar
EDIT
JSFiddle as requested
http://jsfiddle.net/jerswell/Lxsmt96k/
The problem is the z-index, put a lower z-index to the sidebar class, so it won't be hidden anymore.
Here is a new fiddle, I have just simply put z-index: -2; to the .sidebar selector.
PS (nitpicking): In CSS3 after is not a pseudo-class but a pseudo-element, and there is a new notation for it: ::after (however the old notation still works)
If we change z-index of .sidebar in minus value, later it can have a problem for layout. Other elements can overlap this element. We should use :
.sidebar h2{position:relative;}
.sidebar h2 span{position:relative;z-index:2;}
.sidebar h2:after{z-index:1;}
Related
I have read that in order for z-index to take effect, the CSS elements involved need to have "position" attributes. So I have a menu that I would like to appear over an IMG when someone clicks on the menu icon. I have these styles for the menu and the image in the content area ...
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
#personImgDiv {
position: relative;
z-index: 100;
display: table-cell;
width: 80%;
}
However, when I click on the menu icon, the menu is still appearing behind the image -- https://jsfiddle.net/bdcmka1r/2/ . What else am I missing? How do I get the menu to always appear in front?
This is because you're using the wrong selector. .menu-btn is the button class, and it will only affect this button, also there is no way a button can be treated as a container element such as div, nav, header ..etc. Your correct selector will be nav since your menu contained within nav tags. So, you need to add the position and z-index properties to nav selector instead.
nav {
display: none;
width: 100vw;
padding: 0rem;
background-color: red;
position: absolute;
z-index: 9999;
right: 0%;
top: 100%;
text-align: left;
}
#personImgDiv{
position: relative;
z-index: 100;
}
header{
z-index: 101;
}
I see. you have used z-index:100 in porosinIngDiv and you want to display menu over on image so you have to use z-index more in header then #personImgDiv i have given answer on top it will more clear
I am modifying a download link to display two icons above it (using pseudo-elements and an icon font). These icons need to be layered.
To do that, I've given the link a position: relative and the second icon (which I'm positioning over top of the first) gets a position: absolute. Then I just adjusted the top and left values until it sat where I wanted.
jsFiddle
#import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
body {
/* just to make sure everything fits on screen */
padding: 100px;
text-align: center;
}
.download {
position: relative;
color: #000;
text-decoration: none;
}
.download::before {
display: block;
content:'\f1c1';
font-family:'FontAwesome';
font-size: 42pt;
margin-bottom: 10px;
}
.download::after {
position: absolute;
display: block;
content:'\f019';
font-family:'FontAwesome';
font-size: 28pt;
top: -40px;
left: 50%;
margin-left: 5px;
}
Download PDF
In Chrome, it works perfectly. The "download" icon sits right on top of the bottom-right of the "document" icon. In firefox, however, the "download" icon is hovering way above the "document" icon. I suspect this is a result of the pseudo-element not technically being a DOM child of the a.download element, although this example (which doesn't use pseudo-elements) has the same positioning problem.
How do the browsers' implementations of position: absolute in conjunction with pseudo-elements differ, and how can I work around this?
I think i've got it.
The <a> tag is collapsing on Chrome but on Firefox it's being given a box. It seems the best bet would be to give the <a> tag some padding-top to push the text down then also absolutely position the acrobat icon as well. I'm not quite sure how to make it not collapse on Chrome
Example: http://jsfiddle.net/5jn9yw7s/
#import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
body {
padding: 100px;
text-align: center;
}
.download {
position: relative;
color: #000;
text-decoration: none;
}
.download::before {
position: absolute;
display: block;
content:'\f1c1';
font-family:'FontAwesome';
font-size: 42pt;
top: -52pt;
left: 50%;
margin-left: -21pt;
}
.download::after {
position: absolute;
display: block;
content:'\f019';
font-family:'FontAwesome';
font-size: 28pt;
top: -32pt;
left: 50%;
}
Download PDF
In firefox the pseudo elements' absolute positioning ignored and treated as two relative elements. You can set firefox specific fix for this by adding this to your css:
#-moz-document url-prefix() {
.download::after {
top: 0;
left: 0;
margin-left: 5px;
margin-top:58px
}
}
Working fiddle
Play with margins for better result.
In my application I have a section header with a caption and a horizontal line. The horizontal line is a background image (which contains the line, the rest of the image is transparent) of the parent container. The caption is defined by a child element.
<div class="header">
<span>Identifier</span>
</div>
What I am trying to achieve - with CSS styling - is that the child element is displayed with the same background color as the parent, but the background image of the parent container should not be displayed underneath the caption.
.header {
background-image: url("bg_image.png");
background-color: #fff;
position: relative;
height: 25px;
}
.header > span {
position: absolute;
background-color: #fff;
padding: 0px 10px;
}
This works perfectly if I set the background color of the child element explicitly. But the background color can be configured by the user, so I don't want to set it explicitly.
So my the question is, is this possible at all using only CSS styling?
This fiddle shows the problem (I used a gradient to simulate the background image).
EDIT: An important requirement is that the solution must work across browsers (including IE8).
If you're okay with a centered headline, try the css that i used in one of my projects:
h1 {
position: relative;
white-space: nowrap;
text-align: center;
padding: .2em 0;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 2px;
vertical-align: middle;
background: #000;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
You can see the result here: http://codepen.io/DerZyklop/pen/AouDn
It is pure CSS. It adds two lines by using the css-pseudo-elements :before and :after.
With some modifications it should also work well with a left-aligned headline like in your example.
And another important thing to note here is the white-space: nowrap;. So this will only work with one line, but not with multiple lines.
can you please checkout
http://jsfiddle.net/dYr29/3/
i have update your fiddle
<div class="header">
<span>Identifier</span>
</div>
css
.header {
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background-color: #fff;
position: relative;
width: 300px;
height: 1px;
top: 10px;
}
.header > span {
position: absolute;
padding: 0px 10px;
top: -10px;
left: 10px;
background:#fff;
}
I finally identified how to solve the problem.
.header > span {
position: absolute;
background-color: inherit;
padding: 0px 10px;
}
Using background-color: inherit will solve the problem.
I also updated the fiddle.
I try to create heading like this...
Title --------------------
This line with a custom image background
HTML :
<h2>Title</h2>
CSS :
h2 {background:url('line.png') repeat-x 15px 10px;}
Result :
Live : http://jsfiddle.net/5G2aq/
I try to repeat this image with X-axis and add some padding into the left.
But it doesnt work, 15px doenst work... or what ?
PS :Try to do with a single element <h2>, not :after or full-long image
Any trick ?
Do it like this, use :after pseudo with content: ""; and be sure you use display: block;, now we use position: absolute; and assign position: relative; to the container element. Last but not the least we use overflow: hidden; so that we don't get dirty scroll.
Demo
h2 {
position: relative;
overflow: hidden;
}
h2:after {
position: absolute;
height: 2px;
content: "";
display: block;
width: 100%;
top: 50%;
left: 60px;
background:url(http://oi39.tinypic.com/m7t8xw.jpg) repeat-x;
}
Coming to your solution, you are using repeat-x, so you won't see the background-position changing on the x axis as the image is repeating, if you want to go for this approach, you shouldn't repeat.
Even better approach
Demo 2 OR Demo 3 (Using your image)
<div><span>Hello</span></div>
div {
border-top: 1px solid #000;
margin: 20px;
position: relative;
}
div span {
display: block;
position: absolute;
top: -12px;
background: #fff;
padding-right: 10px;
}
The above way will be title width independent, I would've chosen this way
Note: You can replace div with h2
How do I make an html div tag to be on top of everything? I tried adding z-index: 1000, but it remains the same.
In order for z-index to work, you'll need to give the element a position:absolute or a position:relative property. Once you do that, your links will function properly, though you may have to tweak your CSS a bit afterwards.
Yes, in order for the z-index to work, you'll need to give the element a position: absolute or a position: relative property... fine.
But... pay attention to parents!
The element's z-index may be limited by its parent's z-index value.
You have to go down the nodes of the elements to check if at the level of the common parent the first descendants have a defined z-index.
All other descendants can never be in the foreground if at the base there is a lower definite z-index.
In this snippet example, div1-2-1 has a z-index of 1000 but is nevertheless under the div1-1-1 which has a z-index of 3.
This is because div1-1 has a z-index greater than div1-2.
.div {
}
#div1 {
z-index: 1;
position: absolute;
width: 500px;
height: 300px;
border: 1px solid black;
}
#div1-1 {
z-index: 2;
position: absolute;
left: 230px;
width: 200px;
height: 200px;
top: 31px;
background-color: indianred;
}
#div1-1-1 {
z-index: 3;
position: absolute;
top: 50px;
width: 100px;
height: 100px;
background-color: burlywood;
}
#div1-2 {
z-index: 1;
position: absolute;
width: 200px;
height: 200px;
left: 80px;
top: 5px;
background-color: red;
}
#div1-2-1 {
z-index: 1000;
position: absolute;
left: 70px;
width: 120px;
height: 100px;
top: 10px;
color: red;
background-color: lightyellow;
}
.blink {
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
.rotate {
writing-mode: vertical-rl;
padding-left: 50px;
font-weight: bold;
font-size: 20px;
}
<div class="div" id="div1">div1</br>z-index: 1
<div class="div" id="div1-1">div1-1</br>z-index: 2
<div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
</div>
<div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
<div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br> parent)</span></div>
</div>
</div>
More simply :
For z-index:1000 to have an effect you need a non-static positioning scheme.
Add position:relative; to a rule selecting the element you want to be on top
You need to add position:relative; to the menu. Z-index only works when you have a non static positioning scheme.
z-index property enables you to take your control at front. the bigger number you set the upper your element you get.
position property should be relative because position of html-element should be position relatively against other controls in all dimensions.
element.style {
position:relative;
z-index:1000; //change your number as per elements lies on your page.
}
I gonna assumed you making a popup with code from WW3 school, correct?
check it css. the .modal one, there're already word z-index there. just change from 1 to 100.
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
It seems like nesting an element inside a <dialog> element puts it on top of everything. It is placed both horizontally and vertically centered to the screen if you use showModal() but you lose the interactivity with other elements in the page.
document.querySelector("dialog").showModal();
<dialog>
<div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element</div>
If you still want interactivity with the background elements, you can use the show() method. It is placed only horizontally centered to the screen.
document.querySelector("dialog").show();
<dialog>
<div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element to check if I am underneath or not.</div>