css/html5中的重叠图像_Css_Html

css/html5中的重叠图像

css html

css/html5中的重叠图像,css,html,Css,Html,我试图把一个组合网站与四个图像，将作为按钮和一个中心标志使用。我希望在屏幕的角落里有四幅图像作为链接（每幅图像大约占页面的一半），中间有一个重叠的徽标我把网站的CSS放在一起，每次我尝试预览网站时，我都会在屏幕的一角看到四幅图像，中间的徽标不会重叠以下是我用于图像的代码： div.upperLEFT { position: relative; float: left; left: 0; top: 0px; right: auto; bo

我试图把一个组合网站与四个图像，将作为按钮和一个中心标志使用。我希望在屏幕的角落里有四幅图像作为链接（每幅图像大约占页面的一半），中间有一个重叠的徽标

我把网站的CSS放在一起，每次我尝试预览网站时，我都会在屏幕的一角看到四幅图像，中间的徽标不会重叠

以下是我用于图像的代码：

    div.upperLEFT {
    position: relative;
    float: left;
    left: 0;
    top: 0px;
    right: auto;
    bottom: auto;
    width: 50%;
    height: 50%;
    max-width: 50%;
    max-height: 50%;
    z-index: 10;
}

div.upperRIGHT {
    position: relative;
    float: right;
    left: auto;
    top: 0px;
    bottom: auto;
    right: 0;
    width: 50%;
    height: 50%;
    max-width: 50%;
    max-height: 50%;
    z-index: 10;
}

div.lowerLEFT {
    position: relative;
    margin-left: 0;
    margin-top: auto;
    margin-bottom: 0;
    margin-right: auto;
    width: 50%;
    height: 50%;
    max-width: 50%;
    max-height: 50%;
    z-index: 10;    
}

div.lowerRIGHT {
    position: relative;
    float: right;
    margin-left: auto;
    margin-right: 0;
    margin-top: auto;
    margin-bottom: 0;
    width: 50%;
    height: 50%;
    max-width: 50%;
    max-height: 50%;
    z-index: 10;
}

div.centerLOGO {
    position: relative;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
    margin-top:auto;
    margin-bottom: auto;
    width: auto;
    height: auto;
    max-width: 50%;
    max-height: 50%;
    z-index: 20;
}

这是我的html：

    <!DOCTYPE html>

<html lang = "en">

    <head>
      <meta charset = "UTF-8">
      <title> CJ Wormely's Portfolio </title>
      <link href = "cjwstyle.css" rel = "stylesheet" type "text/css">
    </head>

    <body>
      <h1> CJ Wormely Portfolio </h1>
      <div class = "upperLEFT"> <a href = "about_me/cjwPortfolio_about_me.html"> <img src = "aboutmetile.svg" /> </a></div> 
    <div class = "upperRIGHT"> <a href = "id/cjwPortfolio_ID.html"> <img src = "IDTile.svg"/> </a> </div>
    <div class = "centerLOGO"> <img src = "siteLogo.svg"/> </div>
      <div class = "lowerLEFT"><a href = "mailto:cwormely@bex.net"> <img src = "eMailTile.svg"/></a> </div> 
    <div class = "lowerRIGHT"><a href = "art/cjwPortfolio_art.html"> <img src = "artTile.svg"/> </a></div>
</body>

</html>


CJ Wormely的投资组合
CJ沃梅利投资组合

编辑：要正确使用z-index，请使用

z-index:999999。您的图像是这样间隔的，不希望像.png那样，因为您需要定义一个包装器
下面是我要做的。我将嵌套在几个分区中
注意：//这不是完整的解决方案，我希望在为您编写完整页面之前为您指出正确的布局方向。你将不得不为CSS定义更多的属性，甚至是我开始的那些属性——这是我建议的逻辑，应该可以很快实现
#mainwrap { 
width: 100%;
min-height: ; 
}

#coollogo { 
z-index: 999999;
width: ;
height: ;
position: absolute;
margin-top: ;
margin: 0 auto;
}

#top { 
width: 100%;
height: ;
}

.upperLeft { 
min-width: ;
width: 50%;
float: left;
}

.upperRight { 
min-width: ;
width: 50%;
float: right;
}

#bottom { 
margin-top: 200px; // define
width: 100%;
height: ;
}
/// etc, etc

加价：
<div id="mainwrap"><!-- main wrapper -->

<div id="coollogo"></div><!-- the cool logo -->

<div id="top"><!-- top half -->
<div class="upperLeft"></div>

<div class="upperRight"></div>
</div>

<div id="bottom"><!-- bottom half -->
<div class="bottomLeft"></div>

<div class="bottomRight"></div>

</div>
</div><!--// end main wrap -->



我还将div.upperLEFT{
最小化为.upperLEFT{
，因为不需要每次键入div
。如果您继续遇到编码错误，请咨询验证器以获取更多信息
有几种方法可以将您的徽标居中显示在屏幕上
现在，正如另一张海报所说，你的代码“到处都是”。我想你是在试验，并注意到这种组合很接近工作，所以坚持使用它（我们在某一点上都为此感到内疚）。但是，为正确的工作使用正确的工具是很重要的（以避免不可预测/滑稽的结果），那么我建议用这种组合来代替
HTML
元素垂直居中的方法是肯定的。但是，根据提供的信息，这种方法对您来说应该很容易
要了解这是如何工作的，请参见以下示例：
也分享你的HTML。你可以为这个问题创建一个提琴。谢谢你…这是我的HTML:Phlume，我想你不是指.org-但是感谢我在它第一次回来时错过的链接，Paul Irish的任何东西都不会坏！我使用相对位置是因为我想使用Z索引使我的中心徽标与玉米重叠er元素。我在多个地方看到过，为了使用z索引，你必须定义一个位置。我也看到过不使用像素定义项目，因为这通常会影响你的网站在移动设备上的外观。我没有足够的声誉，无法在这里展示我想要实现的目标，所以我放置了一个链接：[link]（）到目前为止，这是我一直得到的[链接]（）谢谢你，特工，现在查看一下。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CJ Wormely's Portfolio</title>
    <link href="cjwstyle.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1>CJ Wormely Portfolio</h1>
    <div class="corner upperLEFT"><a href="about_me/cjwPortfolio_about_me.html"><img src="aboutmetile.svg"></a></div> 
    <div class="corner upperRIGHT"><a href="id/cjwPortfolio_ID.html"><img src="IDTile.svg"></a></div>
    <div class="corner lowerLEFT"><a href="mailto:cwormely@bex.net"><img src="eMailTile.svg"></a></div> 
    <div class="corner lowerRIGHT"><a href="art/cjwPortfolio_art.html"><img src="artTile.svg"></a></div>
    <div class="centerLOGO"><img src="siteLogo.svg"></div>
</body>

</html>

.corner {
    position: absolute;
    width: 50%;
    height: 50%;
}
.upperLEFT {
    left: 0;
    top: 0;
}
.upperRIGHT {
    right: 0;
    top: 0;
}
.lowerLEFT {
    left: 0;
    bottom: 0;
}
.lowerRIGHT {
    right: 0;
    bottom: 0;
}
.centerLOGO {
    position: absolute;
    left: 50%;
    top: 50%;
}
.centerLOGO img {
    position: relative;
    top: -15px; /* your logo height divided in half */
    left: -15px; /* your logo width divided in half */
}