如何使用没有重叠效应的绝对定位
所以，我在PHP中使用 while循环。 while循环生成以下代码：
<img src='$user_six' class='avatar_friend'>
请不要担心$user_six或while循环中的背景信息。我知道它有效。我试图将三个头像放在电影之上。问题是每张图片占用空间并破坏了电影的间距。
这是.avatar_friend：
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
我认为绝对定位效果更好，但图像相互重叠。
这是.avatar_friend：
.avatar_friend {
width: 36px;
height: 36px;
position: absolute;
z-index: 10;
border: 1px solid white;
}
我怎样才能兼顾两个职位？我想要适当的间距，但没有重叠。 如何实现此效果？
修改
我尝试过以下操作：
HTML
<div id='container'> <img src='$user_six' class='avatar_friend'> </div>
CSS
#container {
position: absolute;
}
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
这不起作用......
编辑2：
HTML
<!DOCTYPE html>
<html>
<head>
<title> Movies </title>
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body>
<!-- Navigation -->
<div id='nav'>
<!-- Profile Wrapper -->
<ul class="profile-wrapper">
<li>
<!-- user profile -->
<div class="profile">
<img src="avatars/default.png" />
<a href="#" class="name"> MatthewMalan <i class="fa fa-caret-down" id="caret-down"></i></a>
<!-- more menu -->
<ul class="menu">
<a href="#"><li>Sign Out</li></a>
<a href="#"><li>Sign Out</li></a>
<a href="logout.php"><li>Sign Out</li></a>
</ul>
</div>
</li>
</ul>
<!-- End of Profile Wrapper -->
</div>
<!-- End of Navigation -->
<!-- Movie Content -->
<div id='movie_content2'>
<div id='movie_line'>
<div id='movie_line2'></div>
<!-- Dropdown Selection -->
<nav>
<ul id="dropdown_selection">
<li><a href="#">Most Recent</a>
<ul>
<li><a href="http://localhost/Drop%20Box/movies.php?page=1&sorting=popular"> Most Liked </a></li>
<li><a href="http://localhost/Drop%20Box/movies.php?page=1&sorting=history"> My History </a></li>
<li><a href="http://localhost/Drop%20Box/movies.php?page=1&sorting=likes"> My Likes </a></li>
</ul>
</li>
</ul>
</nav>
<!-- End of Dropdown Selection -->
<div id='descriptive_div' number='1'> <i class='fa fa-caret-left' id='descriptive_caret' number='1'></i> <a href='like.php?number=7&page=1'><a href='like.php?number=7&page=1&code=1&sorting=recent'> <div class='like_button' number='1'> Like </div> </a></a> <span id='descriptive_div_text'> Professional, Clean, Ready to Go </span> <div id='files_left'> 3 Copies Left </div> </div><a href='open.php?destination=movies/56c7ede7d3ed3658.44679765.mp4'> <div class='movie_length' number='1'> <div id='movie_length_text' number='1'> 1h 20m </div> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3658.44679765.mp4'> <div class='movie_rating3' number='1'> <span id='movie_rating_text' number='1'> G </span> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3658.44679765.mp4'> <img src='covers/inside.jpg' class='movie_size' number='1'> </a><div id='descriptive_div' number='2'> <i class='fa fa-caret-left' id='descriptive_caret' number='2'></i> <a href='like.php?number=8&page=1'><a href='like.php?number=8&page=1&code=1&sorting=recent'> <div class='like_button' number='2'> Like </div> </a></a> <span id='descriptive_div_text'> s </span> <div id='files_left'> 1 Copy Left </div> </div><a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'> <div class='movie_length' number='2'> <div id='movie_length_text' number='2'> 2h 16m </div> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'> <div class='movie_rating' number='2'> <span id='movie_rating_text' number='2'> PG-13 </span> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'> <img src='covers/star wars.jpg' class='movie_size' number='2'> </a><img src='avatars/sam.jpg' class='avatar_friend'><img src='avatars/traek.jpg' class='avatar_friend'><img src='avatars/jessie.jpg' class='avatar_friend'><div id='descriptive_div' number='3'> <i class='fa fa-caret-left' id='descriptive_caret' number='3'></i> <a href='like.php?number=9&page=1'><a href='like.php?number=9&page=1&sorting=recent'> <div class='liked_button' number='3'> Like </div> </a></a> <span id='descriptive_div_text'> r </span> <div id='files_left'> 7 Copies Left </div> </div><a href='open.php?destination=movies/56e06853166618.33290858.mp4'> <div class='movie_length' number='3'> <div id='movie_length_text' number='3'> r </div> </div> </a><a href='open.php?destination=movies/56e06853166618.33290858.mp4'> <div class='movie_rating4' number='3'> <span id='movie_rating_text' number='3'> PG-13 </span> </div> </a><a href='open.php?destination=movies/56e06853166618.33290858.mp4'> <img src='covers/56e068530dc9f9.52895782.jpg' class='movie_size3' number='3'> </a><br><div class="complete_page">1</div> </div>
</div>
<!-- End of Movie Content -->
</body>
</html>
CSS
/* Rating of Movie Content */
.movie_rating, .movie_rating2, .movie_rating3, .movie_rating4, .movie_rating5, .movie_rating6, .movie_length, .movie_length2 {
display: inline-block;
width: 100px;
height: 30px;
background: #E10E0D;
color: white;
text-align: center;
position: absolute;
z-index: 5;
font-family: 'Days One', sans-serif;
cursor: pointer;
margin-top: -10px;
margin-left: 16px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #FE4042;
}
.movie_rating4, .movie_rating5, .movie_rating6 {
background: #7D5505;
border: 1px solid #F9BA01;
}
.movie_length, .movie_length2 {
width: 120px;
background: #02477D;
border: 1px solid #97D0F2;
margin-top: 239px;
}
.movie_length2 {
width: 75px;
}
.movie_rating2, .movie_rating5 {
width: 60px;
}
.movie_rating3, .movie_rating6 {
width: 40px;
}
#movie_rating_text, #movie_length_text {
font-size: 25px;
position: relative;
top: 0px;
font-family: 'Days One', sans-serif;
letter-spacing: 1px;
}
/* Description of Movie */
#descriptive_div {
position: absolute;
width: 400px;
min-height: 241px;
background: black;
color: white;
z-index: 6;
margin-left: 228px;
margin-top: -10px;
font-size: 16px;
line-height: 25px;
padding-bottom: 30px;
border: 5px solid #ccc;
display: none;
}
#descriptive_div_text {
width: 370px;
display: inline-block;
position: relative;
left: 14px;
top: 14px;
text-align: left;
}
#descriptive_caret {
color: #ccc;
font-size: 51px;
position: absolute;
margin-left: -19px;
margin-top: 115px;
display: none;
}
/* End of Description of Movie */
/* Movie Line */
#movie_line2 {
width: 1px;
height: 635px;
background: #ccc;
position: absolute;
left: 1120px;
top: 10px;
z-index: 2;
}
/* End of Movie Line */
/* End of Rating of Movie Content */
/* Like Button */
.like_button, .liked_button {
background: #0566AE;
width: 50px;
padding: 3px;
color: white;
text-align: center;
position: absolute;
margin-left: -95px;
z-index: 6;
border-radius: 3px;
cursor: pointer;
font-family: 'Days One', sans-serif;
font-size: 18px;
letter-spacing: 1px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.liked_button {
background: #2C599D;
margin-left: -95px;
margin-top: 0;
}
.like_button:hover {
background: #2C599D;
}
.show {
opacity: 1;
}
/* End of Like Button */
/* End of Movie Content */
/* Tab System for admin.php */
h1, h2, h3, h4 {
padding: 0;
margin: .1rem 0;
border-left: 4px solid #4F2CCA;
padding-left: 8px;
}
.material-tabs {
display: block;
float: left;
padding: 16px;
padding-top: 0;
width: 100%;
max-width: 480px;
left: calc(50% - 480px/2);
position: relative;
margin: 96px auto;
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
border-radius: 2px;
}
@media all and (max-width: 480px) {
.material-tabs {
max-width: 100%;
left: 0;
}
}
.visible {
position: relative;
opacity: 1;
width: 100%;
height: auto;
float: left;
-webkit-transition: opacity .35s ease;
transition: opacity .35s ease;
z-index: 3;
}
.hidden {
position: absolute;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 0s ease;
transition: opacity 0s ease;
}
.hidden img {
display: none;
}
[class*="tabbed-section-"] {
float: left;
color: #000;
}
[class*="tabbed-section-"] img {
display: block;
width: 80%;
margin: auto 10%;
}
.tabbed-section__selector {
position: relative;
height: 32px;
top: -31.2px;
left: -16px;
padding: 0;
margin: 0;
width: 100%;
float: left;
}
.tabbed-section__selector [class*="-tab-"] {
float: left;
display: block;
height: 32px;
line-height: 32px;
width: 100px;
text-align: center;
background: #fff;
font-weight: bold;
text-decoration: none;
color: black;
font-size: 14px;
}
.tabbed-section__selector [class*="-tab-"].active {
color: #4F2CCA;
}
.tabbed-section__selector a:first-child {
border-top-left-radius: 2px;
}
.tabbed-section__selector a:last-of-type {
border-top-right-radius: 2px;
}
.tabbed-section__highlighter {
position: absolute;
z-index: 10;
bottom: 0;
height: 2px;
background: #4F2CCA;
max-width: 100px;
width: 100%;
-webkit-transform: translateX(0);
transform: translateX(0);
display: block;
left: 0;
-webkit-transition: -webkit-transform 0.23s ease;
transition: -webkit-transform 0.23s ease;
transition: transform 0.23s ease;
transition: transform 0.23s ease, -webkit-transform 0.23s ease;
}
.tabbed-section__selector-tab-3.active ~ .tabbed-section__highlighter {
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
.tabbed-section__selector-tab-2.active ~ .tabbed-section__highlighter {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.tabbed-section__selector-tab-1.active ~ .tabbed-section__highlighter {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.divider {
background: rgba(0, 0, 0, 0.1);
position: relative;
display: block;
float: left;
width: 100%;
height: 1px;
margin: 8px 0;
padding: 0;
overflow: hidden;
}
/* End of Tab system for admin.php */
/* Create */
#title, #length {
font-size: 16px;
border: 1px solid #ccc;
padding: 11px;
outline: none;
border-radius: 3px;
width: 400px;
}
#title:focus, #description:focus, #length:focus {
border: 1px solid #A9A9A9;
}
#description {
font-size: 16px;
border: 1px solid #ccc;
padding: 11px;
outline: none;
border-radius: 3px;
width: 400px;
resize: vertical;
max-height: 70px;
}
#rating_text {
position: relative;
top: -10px;
}
#length_text {
position: relative;
top: -10px;
}
/* End of Create */
/* Dropdown Selection */
nav {
margin: 10rem auto;
width: 220px;
position: absolute;
left: 1150px;
top: -140px;
}
nav ul {
color: #fff;
font-family: sans-serif;
font-size: 1.4rem;
letter-spacing: .1rem;
position: relative;
width: 100%;
}
nav a {
background: #1A1A1A;
color: inherit;
display: block;
text-decoration: none;
padding: 1rem;
}
nav ul ul a:hover {
background: #666;
}
nav ul ul {
display: none;
padding-top: 1rem;
position: absolute;
}
nav ul:hover ul {
display: block;
}
nav ul:first-child:hover > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
}
nav ul ul > li:not(:last-child) {
border-bottom: 1px solid white;
}
nav ul > li:first-child:before {
content: "";
position: absolute;
}
nav ul:first-child > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
pointer-events: none;
left: 175px;
top: 30px;
}
.fa {
margin-right: .5rem;
}
/* End of Dropdown Selection */
/* Files Left */
#files_left {
color: red;
width: 110px;
padding: 1px;
border: 1px solid red;
text-align: center;
border-radius: 10%;
position: relative;
left: 15px;
top: 20px;
}
/* End of Files Left */
/* Avatar */
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
/* End of Avatar */
某些CSS可能适用于其他页面。我意识到这是很多信息。如果您还有其他需要，请告诉我......
1 个答案:
答案 0 :(得分：1)
首先，你在每部电影的6个元素中使用相同的id，你不应该这样做。 id是唯一的，因此将其更改为'descriptive_div_1', 'descriptive_caret_1', etc（我在下面的示例中执行了此操作，以便您可以查看位置）。
这就是电影部分的样子（每部电影重复一次，每部电影都没有包装）
<div id='descriptive_div_2' number='2'>
<i class='fa fa-caret-left' id='descriptive_caret_2' number='2'></i>
<a href='like.php?number=8&page=1'>
<a href='like.php?number=8&page=1&code=1&sorting=recent'>
<div class='like_button' number='2'> Like </div>
</a>
</a>
<span id='descriptive_div_text_2'> s </span>
<div id='files_left_2'> 1 Copy Left </div>
</div>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_length' number='2'>
<div id='movie_length_text_2' number='2'> 2h 16m </div>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_rating_2' number='2'>
<span id='movie_rating_text_2' number='2'> PG-13 </span>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<img src='covers/star wars.jpg' class='movie_size' number='2'>
</a>
<img src='avatars/sam.jpg' class='avatar_friend'>
<img src='avatars/traek.jpg' class='avatar_friend'>
<img src='avatars/jessie.jpg' class='avatar_friend'>
因此，为了能够定位每个电影部分中的每个avatar_friend，您需要像这样的CSS规则
.avatar_friend {
width: 36px;
height: 36px;
position: absolute;
z-index: 10;
border: 1px solid white;
}
div[number] + a + a + a ~ .avatar_friend:nth-of-type(3n+1) {
left: 0px;
}
div[number] + a + a + a ~ .avatar_friend:nth-of-type(3n+2) {
left: 36px;
}
div[number] + a + a + a ~ .avatar_friend:nth-of-type(3n+3) {
left: 72px;
}
这个问题是你需要知道它有多少avatars_friend，因为你需要相应地改变nth-of-type计数器和CSS规则的数量。
通过为头像添加这样的包装，将为您修复
<div id='descriptive_div_2' number='2'>
<i class='fa fa-caret-left' id='descriptive_caret_2' number='2'></i>
<a href='like.php?number=8&page=1'>
<a href='like.php?number=8&page=1&code=1&sorting=recent'>
<div class='like_button' number='2'> Like </div>
</a>
</a>
<span id='descriptive_div_text_2'> s </span>
<div id='files_left_2'> 1 Copy Left </div>
</div>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_length' number='2'>
<div id='movie_length_text_2' number='2'> 2h 16m </div>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_rating_2' number='2'>
<span id='movie_rating_text_2' number='2'> PG-13 </span>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<img src='covers/star wars.jpg' class='movie_size' number='2'>
</a>
<div class='avatar_friend_wrapper'>
<img src='avatars/sam.jpg' class='avatar_friend'>
<img src='avatars/traek.jpg' class='avatar_friend'>
<img src='avatars/jessie.jpg' class='avatar_friend'>
</div>
.avatar_friend_wrapper {
position: absolute;
left: 0;
}
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
我建议做的是改变你的PHP循环，以便它们生成类似的东西，其中每个电影项目都有自己的包装。
通过这种方式，您可以获得完全不同的控制，如何根据屏幕尺寸等布局每个电影信息项目。
<div class='movie_div_2' number='2'>
<div id='descriptive_div_2' number='2'>
<i class='fa fa-caret-left' id='descriptive_caret_2' number='2'></i>
<a href='like.php?number=8&page=1'>
<a href='like.php?number=8&page=1&code=1&sorting=recent'>
<div class='like_button' number='2'> Like </div>
</a>
</a>
<span id='descriptive_div_text_2'> s </span>
<div id='files_left_2'> 1 Copy Left </div>
</div>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_length' number='2'>
<div id='movie_length_text_2' number='2'> 2h 16m </div>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_rating_2' number='2'>
<span id='movie_rating_text_2' number='2'> PG-13 </span>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<img src='covers/star wars.jpg' class='movie_size' number='2'>
</a>
<div class='avatar_friend_wrapper'>
<img src='avatars/sam.jpg' class='avatar_friend'>
<img src='avatars/traek.jpg' class='avatar_friend'>
<img src='avatars/jessie.jpg' class='avatar_friend'>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？