CSS对齐失败且Div高度错误

时间：2018-07-15 05:35:54

标签： html css alignment z-index

示例1：我正在尝试使各层居中对齐，以在页面上堆叠徽标效果。当我实际上可以使较低的z-index层正确显示时，对齐方式就不合适了。

示例2：我首先尝试调试所有内容，最后使所有对齐方式正确无误，但是现在较低的z-index图层将无法扩展到正确的尺寸以显示背景。 / p>

主页HTML 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>DaellusKnights</title>
    <meta charset="UTF-8">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="Christopher Waguespack" />
    <meta name="robots" content="index, follow" />

    <meta property="og:title" content="DaellusKnights" />
    <meta property="og:description" content="Coming soon! DaellusKnights will be a central hub for all of my various and diverse projects, as well as a community workshop for others to do the same." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://www.daellusknights.com" />
    <meta property="og:image" content="http://i67.tinypic.com/117sp5w.png" />

    <link rel="stylesheet" href="/css/dk-anim.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<div class="vertz gears rotating" style="z-index:10;"></div>

<div class="vertz" style="z-index:100;">
    <div class="logo">
        <div><h1>Daellus<br />Knights</h1></div>
        <div class="content">
            <div class="circle stop"></div>
            <div class="circle1 stop"></div>
            <B>coming<br />soon</B>
        </div>
    </div>
</div>



</body>
</html>

主页CSS 

@font-face {
  font-family: '1979rg';
  src: url('/fonts/1979rg__.eot');
  src: url('/fonts/1979rg__.woff2') format('woff2'),
       url('/fonts/1979rg__.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

* {
    font-family: "1979rg";
    font-weight: ;
    text-align: center;
    color:rgba(3,79,132,0.75);
    border: 1px solid gray;
}

html {
    height:100%;
}

body {
    background: lightblue url("/img/grid-bg.jpg") no-repeat fixed center;
    background-size: 100% 100%;

    width:100%;
    height:100%;
}

.vertz {
    position: relative;
    margin: 0px;
    padding: 0px;

    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.logo {
    position:relative;
    width:400px;
    top:3px;
    right:3px;

    margin:auto;
    padding-left:3px;
    padding-right:3px;
    padding-bottom:10px;
}

.logo h1{
    font-family: "1979rg";
    font-size:2em;
    font-weight:bolder;
    color: rgb(3,79,132);
    position: relative;
}

.gears {
    width:362px;
    height:362px;
    margin: auto;
    position: relative;

    background:url('/img/spinner-1a.png') no-repeat center;
    background-size:cover;

    z-index: 10;
}

/* =========== Spinner Animation ============== */

@keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

@-webkit-keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

.rotating
    {
    -webkit-animation: rotating 15s linear infinite;
    -moz-animation: rotating 15s linear infinite;
    -ms-animation: rotating 15s linear infinite;
    -o-animation: rotating 15s linear infinite;
    animation: rotating 15s linear infinite;
    }

.spinner-1a {
    width: 362px;
    height: 362px;
    position: relative;
}

.spinner-1a:after {
    width: 362px;
    height: 362px;
    position: absolute;
    background: url("/img/spinner-1a.png") no-repeat center;

    -webkit-animation: spinX 20s infinite linear;
    animation: spinX 20s infinite linear;
}

调试页面HTML 

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="debug.css" type="text/css" media="screen" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
    <script src="debug.js" type="text/javascript"></script>
</head>
<body>

    <!-- Debug Mode Header -->
    <div>
        <h1>Debug Mode!</h1>
    </div>

    <!-- Container for BG-Spinner -->
    <div class="vertz layer1 rotating"> >What the fuck?!< </div>

    <!-- Logo and L-spinner -->
<div class="vertz" style="z-index:100;">
    <div class="logo">
        <div><h1>Daellus<br />Knights</h1></div>
        <div class="content">
            <div class="circle stop"></div>
            <div class="circle1 stop"></div>
            <B>coming<br />soon</B>
        </div>
    </div>
</div>

</body>
</html>

调试页面CSS 

@font-face {
  font-family: '1979rg';
  src: url('/fonts/1979rg__.eot');
  src: url('/fonts/1979rg__.woff2') format('woff2'),
       url('/fonts/1979rg__.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

* {
    font-family: "1979rg";
    font-weight: ;
    text-align: center;
    color:rgba(3,79,132,0.75);
}

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    background: lightblue url("/img/grid-bg.jpg") no-repeat fixed center;
    background-size: 100% 100%;
}

div {
    position: relative;
}

h1{
    font-family: "1979rg";
    font-size:2em;
    font-weight:bolder;
    color: rgb(3,79,132);
    position: relative;
}

.vertz {
    position: relative;
    margin: 0px;
    padding: 0px;

    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.layer1 {
    width: 362px;
    height: 362x;
    margin: auto;
    position: relative;

    background: url("/img/spinner-1a.png") no-repeat center;
    background-size: cover;

    z-index:10;
}

@keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

@-webkit-keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

.rotating
    {
    -webkit-animation: rotating 15s linear infinite;
    -moz-animation: rotating 15s linear infinite;
    -ms-animation: rotating 15s linear infinite;
    -o-animation: rotating 15s linear infinite;
    animation: rotating 15s linear infinite;
    }

.circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #2187e7;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:spinPulse 1s infinite ease-in-out;
    -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #2187e7; 
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-50px;
    -moz-animation:spinoffPulse 1s infinite linear;
    -webkit-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}

1 个答案:

答案 0 :(得分：0)

（代表问题作者发布解决方案）。

结果是我问错了问题。 I found the answer here。

翻译和旋转不能作为单独的功能一起使用。一个优先于另一个。它们必须在一个声明中。该链接很好地回答了这个问题。

相关问题
最新问题