Question

我正在尝试设置我的网页，但我遇到了一个大问题。我已将所有代码包装在标签中，因为我希望将所有内容包装在不同颜色的其他背景中。

但是当我为我的代码设置属性时会发生这种情况：

好像底部元素与上面两者重叠。我正在使用列分隔符，我不知道这是否会影响它。这是我的完整CSS＆amp; HTML代码：

HTML：

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>  
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="nav">
    <div class="container">
        <ul class="pull-left">
            <li><a href="#">Home</a></li>
            <li><a href="#">Featured</a></li>
            <li><a href="#">Coming Soon</a></li>
        </ul>
        <ul class="pull-right">
            <li><a href="#">Sign In</a></li>
            <li><a href="#">Register</a></li>
        </ul>
            <div id="logo-game">
    <img src="http://upload.wikimedia.org/wikipedia/he/b/b7/Gamespot_logo.png">
</div>
    </div>
</div>

<div class="jumbotron">
    <div class="container">
        <div class="feature-cont">
            <div id="feature-cont-back">
        <h1>100's Of Featured Game Reviews</h1>
        <p>Browse through our collection of the most popular game reviews out there</p>
        <a href="#">Find Out More</a>
            </div>
        </div>
    </div>
</div>
<div class="bodytwo">
<!--Recommened Section-->
<div class="recommended">
<div class="text-center">
<div class="container">
    <ul>
        <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Destiny.jpg"></li>
        <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_CODAW.jpg"></li>
        <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Evolve.jpg"></li>
        <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_AssassinsCreed.jpg"</li>
        <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FIFA.jpg"</li>
    </ul>
    <ul>
        <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Forza.jpg"></li>
        <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_BattlefieldHardlines.jpg"></li>
        <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_GTAV.jpg"></li>
        <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Halo.jpg"></li>
        <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FarCry4.jpg">    </li>
    </ul>
</div>
</div>
</div>
<!--Start Of Tables-->
<div class="mainc">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="new-game">
<table>
    <tr>
        <th colspan="3">Games</th>
    </tr>
    <tr>
        <td>
            <img src="http://static.gamespot.com/uploads/original/1197/11970954/2396871-battlefield4.jpeg">
            <p>Battlefield 4 is the genre-defining action blockbuster made from moments that blur the line between game and glory...</p>
        </td>
        <td>
                <img src="http://images.pushsquare.com/games/ps3/fifa_14/cover_large.jpg">
                <p>This year it's all about the emotion of scoring great goals - the challenge of building play as a team...</p>
        </td>    
        <td>
            <img src="http://images.pushsquare.com/games/ps3/dead_island_riptide/cover_large.jpg">
            <p>Take on hundreds of Zombies at once as your screen becomes swamped with the undead all after one thing…. You!</p>
        </td>
    </tr>
    <tr>
        <td height="400">
               <img src="http://images.pushsquare.com/games/ps4/need_for_speed_rivals/cover_large.jpg">
            <p>High speed meets high stakes in Need for Speed: Rivals. Play as a lone-wolf racer or a team-based cop as you speed... </p>
        </td>
        <td>
            <img src="http://images.pushsquare.com/games/ps4/watch_dogs/cover_large.jpg">
            <p>Join the Community and Social Team from GAME as they head to Paris for a special Watch Dogs event with Ubisoft!.. </p>
        </td>    
        <td>
            <img src="http://images.pushsquare.com/games/ps3/last_of_us/cover_large.jpg">
            <p>From the creators of the Uncharted Series comes an emotionally-charged experience that’ll keep you gripped...</p>
        </td>
    </tr>
</table> 
</div>
</div>
<!--End Of Tables-->

<!--Start of chart-->
<div class="col-md-6">
<div class="table-chart">
<table class="background">
    <tr>
        <th colspan="3"><h1>Game Charts</h1></th>
    </tr>
    <tr>
        <td><h1>1</h1></td>
        <td><img src="http://images.pushsquare.com/games/ps3/gran_turismo_6/cover_large.jpg"</td>
        <td><h3>Gran Turismo</h3><a href="#" class="view-review">View Review</a></td>
    </tr>
    <tr>
        <td><h1>2</h1></td>
        <td><img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg"</td>
        <td><h3>Call of Duty:Ghosts</h3><a href="#" class="view-review">View Review</a>      </td>
    </tr>
    <tr>
        <td><h1>3</h1></td>
        <td><img src="http://images.pushsquare.com/games/ps4/killzone_shadow_fall/cover_large.jpg"</td>
        <td><h3>Killzone</h3><a href="#" class="view-review">View Review</a></td>
    </tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--End of chart-->
</div>
<div class="feature-article">
<div ="feature-back">
 <div class="container">
    <div class="row">
        <div class="col-md-4">
            <h2>Call Of Duty: Ghosts</h2>
            <img src="http://eaglerising.com/wp-content/uploads/2013/11/call_of_duty_ghosts-hd-300x180.jpg">
            <p>Build your team and take up to 6 of them into battle in the all new Squads mode. This mode takes the best parts of the multiplayer experience and allows you to play either solo or cooperatively with the custom soldiers created and leveled up in multiplaye</p>
        </div>
        <div class="col-md-4">
        <div id="feature_back">
            <h2>Grand Theft Auto V</h2>
            <img src="http://ronewiznation.files.wordpress.com/2013/10/grand-theft-auto-game-cover.jpg?w=300&h=180">
            <p>Grand Theft Auto V Los Santos: a sprawling sun-soaked metropolis full of self-help gurus, starlets, and fading celebrities, once the envy of the Western world, now struggling to stay afloat in an era of economic uncertainty and cheap reality TV. </p>
        </div>
        </div>
        <div class="col-md-4">
            <h2>Assasins Creed</h2>
            <img src="http://www.ketubanjiwa.com/wp-content/uploads/2013/12/Assassins-Creed-IV-Black-Flag-Freedom-Cry-DLC-Reloaded-Single-Link-300x180.jpg">
            <p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.</p>
        </div>
    </div>
 </div>
 </div>
</body>
</html>

CSS：

body {
background-color:#121212;
}
.bodytwo {
background-color:white;
position:relative;
}
.nav {
background-color:black;
width:100%;
position:fixed;
z-index:5;
}
.nav li {
display:inline;
}
.nav a {
padding:10px 8px;
position:relative;
top:6px;
color:#FF6600;
text-transform:uppercase;
}
#logo-game img {
position:relative;
height:50px;
left:20%;
}
.jumbotron {
position:relative;
top:50px;
background-image:url('http://collectortoys.net/wp-content/uploads/2014/06/battlefield-4-server-bannerladder-standings-for-xboxone-battlefield-4---bf4-xbox-one-mretosqa.jpg');
height:500px;
z-index:2;
background-size:cover;
}
.feature-cont {
position:relative;
left:800px;
width:350px;
color:white;
z-index:2;
}
#feature-cont-back {
background-color:rgba(20,20,20,.5);
width:400px;
height:400px;
position:relative;
border-radius:10px;
padding:5px;
z-index:1;
}
.jumbotron h1 {
font-family:ubuntu, Arial;
}
.recommended li {
display:inline;
margin:auto;
float: none;
position:relative;
top:80px;
}
.new-game {
position:relative;
}
.new-game td, th {
padding: 0.5;
}
.new-game table {
border-collapse:separate;
border-spacing:15px 10px;
border: 1px solid black;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.new-game tr {
padding:10px;

}
.new-game tr th {
text-align:center;
color:white;
font-family:ubuntu;
font-size:25px;
}
.new-game td {
padding:10px;
width:100px;
height:200px;
vertical-align:top;
background-color: rgba(24,24,24,.2);
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

}
.new-game td p {
text-align:center;
font-family:arial;
font-size:12px;
color:white;
}
.new-game td img {
width:100px;
height:100px;
}
.background { 
background: url("http://i1057.photobucket.com/albums/t390/Alexwileyy/box-01_zpsdd34bf84.png") 
no-repeat;
height:500px;
width:424px;

}
.table-chart table {
position:relative;
border-collapse:separate;
}
.table-chart tr td h3 {
width:150px;
text-align: center;
font-family:Arial;
font-size:20px;
position:relative;
top:-20px;
color:black;
}
.table-chart td a {
position:relative;
top:-20px;
}
.table-chart td img {
width:100px;
height:100px;
}
.table-chart th h1 {
text-align:center;
font-family:ubuntu;
color: #dd6a15;
text-shadow: 0 2px rgba(0,0,0,0.75);
}
.table-chart td {
padding:15px;
box-shadow: 0 3px 1px rgba(26,26,26,0.75);
}
.feature-article {
position:relative;
clear:both;
height:400px;
border-bottom:3px solid #2f2f2f;
border-top:3px solid #2f2f2f;
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/1_zps87c3163e.jpg');

}
.feature-article .col-md-4 {
width:370px;
height:200px;
text-align:center;
margin:auto;
z-index:1;
}
.feature-article .col-md-4 img {
width:300px;
height:180px;
}
.feature-article .col-md-4 p {
width:350px;
}
#feature_back {
clear:both;
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/line-01_zps79e6ad19.png');
height:400px;
width:370px;
padding-left:10px;
background-repeat:no-repeat
}
/*Buttons Design*/
.view-review {
margin-top: 0px;
margin-right: 0px;
padding: 14px 26px;
font-size: 14px;
line-height: 100%;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
color: #fff;
display:inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-weight: bold;
transition: background 0.1s ease-in-out;
/*for different browsers */
-webkit-transition: background 0.4s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
-ms-transition: background 0.1s ease-in-out;
-o-transition: background 0.1s ease-in-out;
/*END*/
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.view-review:active {
padding-top: 15px;
margin-bottom: -1px;
}
.view-review, .view-review:hover, .view-review:active {
outline: 0 none;
text-decoration: none;
color: #fff;
border-radius: 3px;
}

.view-review {
background-color: #2f2f2f;
box-shadow: 0px 3px 0px 0px #ea6300;
width:150px;
height:35px;
}
.view-review:hover {
background-color: #454545;
}
.mainc .row {
position:relative;
top:80px;
}

总结一下，我希望白色背景只包含页面上一直运行的页面上的表格元素，但是底部元素与表格重叠。根本不知道我能做什么？

Answer 1

您无缘无故地全部添加position:relative。通常，您使用position:relative为绝对定位的子元素设置锚点。然后，您可以使用position:absolute在布局中移动这些元素。

如果您需要对元素定位进行微调，请使用margin:，而不是position:relative。

Answer 2

问题是你给'.mainc .row'一个'top：80'。这导致重叠。删除它，您的页脚将不会重叠内容。另外，给'.mainc'类提供'margin-top：100px'。这将解决新的重叠问题。

您需要学习更有效地使用引导程序。不要害怕滥用bootstrap的'容器'和'行'div。把这些元素想象成一些巨大的乐高集团，它们将彼此叠加在一起。

此外，我不建议使用表格，因为它们是老式的，对编辑不太友好。使用DIV，您可以更好地控制它们，并且使用引导程序可以更轻松地进行调整。

如果您希望自己的网站具有响应能力，请通过添加所有引导程序“col-x-x”类来了解如何相应地扩展和放置列。

对齐我页面上的元素是很奇怪的

2 个答案: