Positioning child behind parent - z-index

I'm trying to position a child element behind it's parent:
<div><p>test</p></div>
My CSS is:
div {
width: 100px;
height: 100px;
background: red;
z-index: 2;
}
div p {
position: relative;
z-index: 1;
}
The z-index of the <p> is lower than it's parent z-index, but it is displayed in front. Why is that?


The div and the p in the example exist on different stacking contexts, and the div's z-index tells it to appear two levels higher than its siblings, not its children.
However, an element's z-index that is below zero puts it behind its parent.
Giving the p a z-index of -1 puts the p behind the div, regardless of the div's z-index.


If that's possible in your situation, you need to prevent stacking context on the parent. To do so, remove the z-index from your <div/> and set the <p/>'s z-index to -1:
div {
width: 100px;
height: 100px;
background: red;
/* z-index: 2; */
}
div p {
position: relative;
z-index: -1;
}

Related

pdf-creator-node can not generate ul li with 2 column

i've problem when convert html to pdf with pdf-creator-node. when i uses ul li with column=2, in preview html is look good. but when i generated to pdf always preview in one column. may i help me ? this is my css
.itenerary ul{
display: block;
list-style-type: disc;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
line-height:1.6 ;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
i want to get tips and trick to solve my problems

Using flex-box with Slick-carousel, width = 0 & first slide is hidden

When first loading the slick-carousel while using flex-boxes, the width of the slick-slide and the slick-track are set to 0 which hides the first slide until it triggers the next slide. If there is only one slide, it's hidden and will never show unless the window is manually resized.

First wrap your carousel with a container:
.myContainer {
position: fixed;
top: 0;
left: 0;
height: 100%;
width:100%;
}
<div class="myContainer">
<div class="myCarousel" (click)="navigate()"></div>
</div>
Next, be sure is to have min-height & min-width set to 0 for the .slick-slider.
CSS:
note the changes from the default slick-carousel styles are commented
// new definition
.slick-slider {
min-height: 1px;
min-width: 1px;
}
.slick-slide {
float: left;
[dir="rtl"] {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized {
display: block;
// set height and width
height: 100%; // helps to fix the loading issue when using flex-box - stretches slide vertically
width: 100% !important; // helps to fix the loading issue when using flex-box - shows slide upon load
}
.slick-loading {
visibility: hidden;
}
.slick-vertical {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
// set height
width: 100% !important; // helps to fix the loading issue when using flex-box
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading {
visibility: hidden;
}
}
.slick-initialized {
display: block;
// set height and width
height: 100%; // helps to fix the loading issue when using flex-box - stretches slide vertically
width: 100% !important; // helps to fix the loading issue when using flex-box - shows slide upon load
}
.slick-loading {
visibility: hidden;
}
.slick-vertical {
display: block;
height: auto;
border: 1px solid transparent;
}
Finally, make sure you have defined the responsive setting when initializing your slick-slider:
// initialize carousel
private initializeCarouselSettings(){
this.carousel.slick({
accessibility: false,
autoplay: false,
arrows: false,
slidesToShow: 1,
pauseOnHover: false,
pauseOnFocus: false,
draggable: false,
swipe: false,
touchMove: false,
centerMode: true,
fade: this.isTransitionTypeFade(),
autoplaySpeed: this.getSlideInterval(),
speed: this.getSpeedValue(),
responsive: [ // fixes the loading issue when using flex-box
{
breakpoint: 1024,
settings: {
mobileFirst: false,
infinite: true,
speed: this.getSpeedValue(),
slidesToShow: 1,
centerMode: true,
variableWidth: false,
focusOnSelect: false
}
}
]
});
}

solving my Grid with sass?

I have been trying to solve my grid and I'm not sure why my columns are not stacking up next to each other. when I am making a div with a container and inside it a row and then 12 columns the columns are taking the full width then staking below
$screen-width: 1147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: ( $i /$number-of-columns ) * 100%;
background:#ccc;
float: left;
margin-left: $gutter;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin:0px auto;
padding: 0 $padding 0 $padding;
background: blue;
#include clearfix;
}
.row {
width: 100%;
margin: 0;
background: green;
#include clearfix;
}

You are dividing the available space by the number of columns, but then you are adding a margin to the left of each column So if you have 10 columns then each column is 10% of the total width + gutters. This adds up to more than 100% and is pushing three of your columns onto the next line.
Most grid systems solve this in one of two ways...
A) use css calc() to calculate the width of each column by dividing the space by the number of columns then deducting the gutter. E.g. calc(10% - 30px);
B) Use padding on each column to create the gutters and add it equally on both sides. E.g. padding:0 15px; This will give you an even spread of the columns and require no calculations but the downside is you'll need -15px margin on each side of your container to accommodate it and you'll need an extra HTML tag inside each column.

So I have managed to add that into a function, But now I have left margin what seems to be happening, which I'm not sure why is that, I have tried, things like putting a negative margin on the row.
$screen-width: 2147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#function grid-width($cols, $has-gutter:false) {
#if $has-gutter {
#return calc(((100% / #{$number-of-columns}) * #{$cols}) - #{$gutter});
}
#else {
#return calc((100% / #{$number-of-columns}) * #{$cols});
}
}
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: grid-width(#{$i}, true);
background:#ccc;
display: inline-block;
margin-left: $gutter;
float: left;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin: 0px auto;
height:100px;
background: blue;
#include clearfix;
}
.row {
width: 100%;
height:50px;
background: green;
#include clearfix;
}

What determines the width of an <ol> with {display:inline-block;}?

I have an <ol> element to which I'd like to apply a background color. I don't want the background color to cover the entire width of the <ol>'s parent but rather just its contents + some padding.
Setting {display:inline-block;} on the <ol> basically does the trick but somehow Google Chrome decides that the <ol>'s width should be 462px. This causes the third <li> to break over two physical lines which is neither necessary nor desired.
Where do the 462px come from? How can I keep the third <li> on a single line? I don't want to set the <ol>'s width to a static value since I've many such <ol>s. Using {float:left;} rather than {display:inline-block} triggers similar behavior but also forces me to clear whatever element comes after the <ol>. Giving the <ol> a width of auto doesn't seem to change a thing (I suspect it already was auto). Thank you in advance for any suggestions.

Try putting white-space: nowrap onto the li elements

Try to reset your html project with this css code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: normal;
}
ol, ul {
list-style: none;
}
blockquote {
quotes: none;
}
blockquote:before, blockquote:after {
content: '';
content: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a img {
border: none;
}
Otherwise, you can override this value like this:
Css:
ol,li {
width: 100% !important;
}

Vertical align and line-height in css

I have two probably easy CSS questions here:
http://web288.merkur.ibone.ch/klingler/
How can I get the © Klingler Fahrzeugtechnik AG 2013 in the footer vertically aligned to the bottom? I tried align-bottom and vertical align of the p tag but without luck...
The second thing is, I feal the distance between the lines of the main text is a bit narrow. I wanted to have a bigger line height. I tried changing the line-height property of the p tag to 2.5em instead of 1.5em but this did not change anything? Why is this?
p {
font-size:1em;
line-height:1.5em;
margin: 1.5em 0 0 0;
}

Do this:
footer {
position: relative;
}
.ym-g25 {
position: absolute;
bottom: 0;
}

Do this:
.ym-g25 {
width: 25%;
vertical-align: bottom;
display: table-cell;
line-height: 1;
float: none;
}

Resources