css - 网站上的定位元素有问题

我在编码的网站上遇到了一些问题，但我找不到这些问题的答案。首先，这是我遇到问题的页面的 HTML 代码，以及链接到它的 CSS 代码:

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/test.css">
<title>Capturing Life - Kim Chaffin Photography</title>
</head>
<body>
<div id="bg2">
<center>
<div id="logo">
<img src="../Pictures/logo.png" width="511" height="207" alt="Load Error">
</div>
</center>
<center>
<div id="flourish">
<img src="../Pictures/flourish2.png" width="462px" height="329px" alt="Load Error">
</div>
</center>
<center>
<div id="header">
<svg>
<rect x="100" y="100" rx="20" ry="20" width="1096" height="230"     style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/>
</svg>
</div>
</center>
<center>
<div id="headerfix">
<svg>
<rect x="100" y="300" width="1096" height="100"     style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/>
</svg>
</div>
</center>
<center>
<div id="tabbox">
<svg>
<rect x="100" y="300" width="1096" height="50"     style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/>
</svg>
</div>
</center>
<center>
<div id="tabs">
<ul type=none>
<table width="80%">
<tr>
<td>
<ul>
<a href="Home.html"><img src="../Pictures/Kim Photography_1.png"     onmouseover="this.src='../Pictures/Kim Photography on mouseover_1.png'" 
onmouseout="this.src='../Pictures/Kim Photography_1.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_1.png";
</script>
</td>
<td>
<a href="About Kim.html"><img style="border:0px;" src="../Pictures/Kim     Photography_2.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_2.png'" 
onmouseout="this.src='../Pictures/Kim Photography_2.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_2.png";
</script>
</td>
<td onmouseover="showmenu('portfolios')" onmouseout="hidemenu('portfolios')">
<a href="Portfolios.html"><img style="border:0px;" src="../Pictures/Kim     Photography_3.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_3.png'" 
onmouseout="this.src='../Pictures/Kim Photography_3.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_3.png";
</script>
<br>
<table class="menu" id="portfolios" width="124px" rules="cols">
<tr><td class="menu"><a href="portfolios/maternity.html"><center><b>Maternity</b>    </center></a></td></tr>
<tr><td class="menu"><a href="portfolios/little ones.html"><center><b>Little Ones</b>    </center></a></td></tr>
<tr><td class="menu"><a href="portfolios/teens.html"><center><b>Teens</b></center></a>    </td></tr>
<tr><td class="menu"><a href="portfolios/families.html"><center><b>Families</b>    </center></a></td></tr>
<tr><td class="menu"><a href="portfolios/events.html"><center><b>Events</b></center>    </a></td></tr>
<tr><td class="menu2"><a href="portfolios/pets.html"><center><b>Pets</b></center></a>    </td></tr>
</table>
</td>
<td onmouseover="showmenu('sessions')" onmouseout="hidemenu('sessions')">
<a href="Sessions.html"><img style="border:0px;" src="../Pictures/Kim     Photography_4.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_4.png'" 
onmouseout="this.src='../Pictures/Kim Photography_4.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_4.png";
</script>
<br>
<table class="menu" id="sessions" width="121px" rules="cols">
<tr><td class="menu"><a href="sessions/mini.html"><center><b>Mini-Sessions</b></center>    </a></td></tr>
<tr><td class="menu"><a href="sessions/full.html"><center><b>Full Sessions</b></center>    </a></td></tr>
<tr><td class="menu"><a href="sessions/newborns.html"><center><b>Newborns</b></center>    </a></td></tr>
<tr><td class="menu2"><a href="sessions/slice.html"><center><b>Slice of Life</b>    </center></a></td></tr>
</table>
</td>
<td onmouseover="showmenu('workshops')" onmouseout="hidemenu('workshops')">
<a href="Workshops.html"><img style="border:0px;" src="../Pictures/Kim     Photography_5.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_5.png'" 
onmouseout="this.src='../Pictures/Kim Photography_5.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_5.png";
</script>
<br>
<table class="menu" id="workshops" width="143px" rules="cols">
<tr><td class="menu"><a href="workshops/slr.html"><center><b>SLR</b></center></a></td>    </tr>
<tr><td class="menu"><a href="workshops/quick tips.html"><center><b>Quick Tips</b>    </center></a></td></tr>
<tr><td class="menu2"><a href="workshops/documenting life.html"><center><b>Documenting     Life</b></center></a></td></tr>
</table>
</td>
<td>
<a href="Client Galleries.html"><img style="border:0px;" src="../Pictures/Kim     Photography_6.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_6.png'" 
onmouseout="this.src='../Pictures/Kim Photography_6.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_6.png";
</script>
</td>
<td>
<a href="Contact.html"><img style="border:0px;" src="../Pictures/Kim Photography_7.png"     onmouseover="this.src='../Pictures/Kim Photography on mouseover_7.png'" 
onmouseout="this.src='../Pictures/Kim Photography_7.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_7.png";
</script>
</td>
</tr>
<li>
</ul>
</table>
</ul>
</div>
</center>
</div>
</body>
</html>

CSS:

body
{
background-image:url('../Pictures/Black dot 2.png');
background-attachment:fixed;
font-family:Arial,Helvetica,sans-serif;
}    
table
a
{
color:black;
text-decoration:none;
}
a:hover
{
color:#FFFFFF;
}
td.menu
{
background-color:#625D5D;
}
td.menu2
{
background-color:#625D5D;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
    -moz-border-radius-bottomright:10px;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
#bg2
{
background:#FFFFFF;
background:rgba(255,255,255,1);
width:90%;
height:90%;
margin:4em auto;
}
#header
{
position:relative;
top:-545px;
}
#headerfix
{
position:relative;
top:-1265px;
}
#tabbox
{
position:relative;
top:-1770px;
}
#tabs
{
position:absolute;
}
#flourish
{
position:relative;
top:-150px;
right:340px;
z-index:+1;
}
#logo
{
position:relative;
top:113px;
right:-240px;
z-index:+1;
}

这些是我遇到的问题:

The code will not allow me to move the navigation tabs (div id="tabs"), which are stuck at the bottom of the page. If I apply any movement properties (i.e. "top:-1000px;"), the tabs disappear entirely instead of moving where I wish them to.

The white background (div id="bg2") causes the elements div id="header", div id="headerfix", div id="logo", div id="flourish", and div id="tabbox" to be pushed down and to the right, as opposed to the top and center position I want them to be in.

The navigation tabs Portfolios, Sessions, and Workshops are supposed to have drop-down menus under them. However, the menus simply don't appear for some reason.

我认为这些是我目前唯一遇到的问题。但是，如果有人在我的代码中发现任何其他问题，请告诉我，我将不胜感激。

最佳答案

首先，您的 HTML 中似乎有代码错误，涉及您的

当我使用 top: 0px 时，你的#tabs div 会移到顶部；因为它应该。我不太确定你遇到了什么麻烦。
您的白色背景似乎包含其他 div，因此不会将您的元素移动到任何地方。
如果没有带有我们可以查看的图像的实时工作演示，我们将无法为您排查此问题。此外，使用表格进行下拉导航本身会带来一大堆问题 - 您应该考虑切换到 div 或结构化

关于css - 网站上的定位元素有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15058926/

css - 网站上的定位元素有问题

上一篇：html - 如何在不更改样式的情况下向我的导航添加 Bootstrap 响应功能

下一篇：javascript - 根据用户选择使用 javascript 部分着色图像