Question

我的问题很简单。我有一个标题框，里面有3个div;

背景图片（相对）
叠加;背景颜色与不透明度（相对）
和文字。

问题在于我不能将我的文本放在中间; 我创建了一个关于这个问题的javascript函数，但脚本没有做任何事情设置元素的top，left值的唯一方法是将其写入css文件。

任何猜测？（而且没有JS / JQuery代码可以工作;在没有div-boxing疯狂的情况下测试它）

以下是文件：

的index.html：

<head>

    <title> Website </title 


    <!-- CSS Files -->
    <link rel="stylesheet" type="text/css" href="css/content.css">
    <link rel="stylesheet" type="text/css" href="css/layout.css">
    <link rel="stylesheet" type="text/css" href="css/fontboxes.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/header.css">
    <link rel="stylesheet" type="text/css" href="css/footer.css">

    <!-- jQuery Einbindung -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        function adjust() {

            getElementById("mediumfontbox").style.top = 125;

        }


    </script>


</head>


<body>

    <header>
        <img src="img/header1.jpg"> </img>
        <div id="overlay1"></div>

        <div class="mediumfontbox" onload="adjust()"> Inspirational Quote </div>
    </header>


    <div class="main"></div>


    <footer id="overlay1">
        <div id="copy">Copyright by Vancold</div>
    </footer>   

</body>

header.css

header 
{
   width:100%;
   height:100%;
}

header > * 
{
   position:absolute;
}

img 
{
   z-index: 0;
   width: 100%;
   height:100%;
   top: 0px; left:0px;
}

header > .mediumfontbox
{
z-index: 2;
}

header > #overlay1 
{
   z-index:1;
   height: inherit;
}

header > #overlay2 
{
    z-index:1;
    height: inherit;
}

header > #overlay3
{
    z-index:1;
    height: inherit;
}

fontboxes.css

.smallfontbox 
{
    width: 125px;
    height: 125px;
}


.mediumfontbox 
{
    width: 250px;
    height: 250px;
}

.bigfontbox 
{
    width: 500px;
    height: 500px;
}

.font
{
    color: white;
    font-family: "Times New Roman", Times, serif;
    font-size: 32px;

}

layout.css中

* {
    margin: 0px;
    padding: 0px;

}

#overlay1
{
    background: blue;
    opacity: 0.125;
    width: 100%;
}

#overlay2
{
    background: red;
    opacity: 0.125;
    width: 100%;
}

#overlay3
{
    background: green;
    opacity: 0.125;
    width: 100%;
}

Answer 1

在正文中呈现任何内容之前，您的脚本正在文件的标题中运行。尝试将脚本移动到文档正文的末尾。

Answer 2

top的样式值应为包含单位的字符串 - 例如'125px'。
getElementById是document。
onload不适用于div。把它放在body。

#mediumfontbox {
  position: absolute;
}

<head>

  <script>
    function adjust() {
      document.getElementById("mediumfontbox").style.top = '125px';
    }
  </script>

</head>

<body onload="adjust()">

  <div id="mediumfontbox">
    Inspirational quote
  </div>

</body>

使用相对div-box定位问题

2 个答案: