How to center various z-indexed div classes?

I have a page: the image of my page..

I wanted to make it centralized, but I could not do it. Problems:

  • I want to give a full page of a black div.
  • I want to centralize the other two divs without using the left property in css.
  • While the hover of the z value should increase by any value so that the entire div can rise.

I learned about margin: 0 auto o auto; that it centralizes the element with respect to the page. I want to get the same for yellow and green divs using the margin wrt property of black divisions. Can I get these results using CSS or will I have to use Javascript, etc.? My html code is here:

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styling.css"/>

    </head>
    <body>
        <div class="first">
            <center> <a href="http://www.google.com">The first link </a></center>
        </div>

        <div class="second">
            <center> <a href="http://www.fb.com"> The second link </a></center>
        </div>

        <div class="third">
            <center> <a href="http://www.yahoo.com"> The third link </a></center>
        </div>      
    </body>
<html>

My css document: -

.first
{
    position: absolute;
    width:500px;
    color:#fff;
    height:200px;
    background-color:#000;
    z-index: 0;

    margin:0 auto 0 auto;
}

.second
{
    width:400px;
    position: absolute;
    height:200px;
    background-color: green;
    left:60px;
    z-index: 1;
    margin:50px auto 0 auto;

 }
 .third
 {
    position: absolute;
    width:300px;
    height: 200px;
    left:100px;
    background-color:yellow;
    z-index: 2;

        margin:100px auto 0 auto;
}

body div:first-child a:hover
{
    font-size:30px;
    color:yellow;
    z-index:5;
}
body  div +div a:hover
{
    font-size:40px;
    color:red;
    z-index: 5;
}
body div+div+div  a:hover
{
    font-size:50px;
    color:#fff;
    z-index:5;
}

I apologize for my English. And I hope that you will have my problems.

+4
1

- , left - — , OP .

: http://jsfiddle.net/teddyrised/YqDL5/

: 50% /. . , , .

:

.second, .third {
    left: 50%;
    transform: translateX(-50%);
}

, HTML-:

  • , , , div , top .
  • <center>. CSS, HTML- .

HTML:

<section>
    <div class="first"><a href="http://www.google.com">The first link </a></div>
    <div class="second"><a href="http://www.fb.com"> The second link </a></div>
    <div class="third"><a href="http://www.yahoo.com"> The third link </a></div>     
</section>

, div , . , , .

section {
    position: relative;
}
.first {
    width:100%;
    color:#fff;
    height:200px;
    background-color:#000;
}
.second, .third {
    left: 50%;
    transform: translateX(-50%);
}
.second
{
    width:400px;
    position: absolute;
    height:200px;
    background-color: green;
    top: 50px;
    z-index: 1;
 }
 .third {
    position: absolute;
    width:300px;
    height: 200px;
    top: 100px;
    background-color:yellow;
    z-index: 2;
}

: http://jsfiddle.net/teddyrised/YqDL5/

+2

Source: https://habr.com/ru/post/1535005/


All Articles