相对Div-box的定位问题

我的问题很简单。我有一个标题盒，内部有3个divs;

背景图像（相对）
覆盖层；带有不透明度（相对）的背景色
和文字。

问题是我无法将文本放在中间。我创建了一个javaScript函数来掌握问题，但是脚本没有任何操作设置顶部，左值的唯一方法是将其写入CSS文件中。

有什么猜测吗？（而且没有JS/jQuery代码确实有效；没有Div-Boxing Madness进行了测试）

这是文件：

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%;
}

您的脚本在文件中呈现在文件的标题中。尝试将脚本移至文档主体的尽头。

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>

相关内容

最新更新

热门标签：