Geek Answers Handbook

Difference in window shadow when using relative position

I am not very surprised by the behavior of box-shadow, which, if the container is located relative to the shadow, goes lower, but if it is not located (i.e., a static position), the shadow appears in front.

#main{
  position: relative; /*sets shadow to below the heading*/
}

Detaching the relative position sets the shadow before the header:

#main{
  /*position: relative; */
}

enter image description here

demonstration

Can someone tell me about this change?

+4
source share
3 answers

position: relative should not have an effect there under normal circumstances, because an element with a shadow appears later in the source anyway.

, , , display: table-*. , position: relative Google , . spec:

"position: relative" table-row, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell table undefined.

, , , display: table.

+2

transform: translate3d(0, 0, 0); translate(0, 0); #main > div - DEMO

-moz-transform: translate(0, 0);, Firefox - DEMO

CSS

#main {
    display: table-row;
    background: gray;
    position: relative;
}
#main > div {
    display: table-cell;
    width: 500px;
    height: 300px;
    transform: translate3d(0, 0, 0); /* or transform: translate(0, 0); */
}
+1

CSS.

#main > div {
display: table-cell;
height: 300px;
position: relative;
width: 500px;}
0

More articles:


All Articles