Css 如何使用无重叠效果的绝对定位
因此，我在PHP中使用while循环。while循环生成以下代码：Css 如何使用无重叠效果的绝对定位,css,absolute,overlapping,Css,Absolute,Overlapping,因此，我在PHP中使用while循环。while循环生成以下代码： <img src='$user_six' class='avatar_friend'> 我认为绝对定位效果更好，但图像相互重叠 这是.avatar\u friend的信息： .avatar_friend { width: 36px; height: 36px; position: relative; z-index: 10; border: 1px solid white; } .avata
<img src='$user_six' class='avatar_friend'>
.avatar\u friend.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
.avatar_friend {
width: 36px;
height: 36px;
position: absolute;
z-index: 10;
border: 1px solid white;
}
<div id='container'> <img src='$user_six' class='avatar_friend'> </div>
<!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>
<div id='container'> <img src='$user_six' class='avatar_friend'> </div>
<!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可能用于其他页面。我意识到这是很多信息。如果您还需要什么，请告诉我……首先，您在每部电影的6个元素中使用相同的
idid'descriptive\u div\u 1'、'descriptive\u caret\u 1'等通过为头像添加这样的包装，将为您修复它
<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>
我建议您更改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>
s
还剩下1份
绝对位置，并为您提供更多控制。我已经尝试过了。我编辑了我的答案来解释…你能让你的浏览器显示图片吗，然后右键单击，说“查看页面源代码”（或任何适用于你的浏览器的内容），然后复制并粘贴到HTML中吗？现在我看不到你提供的任何东西中的三个。我已经尝试了@LGSon解决方案。这不适合我的特殊情况。所有这些电影都是动态的，因此HTML是通过PHP实现的。PHP有三个while循环……由于使用PHP while循环编写代码，我遇到了一个独特的问题。我不能在while循环之外编写代码。所有代码都必须在while循环中，所以您给我的任何代码都将被复制三次。因此，将有三个div，一类是电影，三个div，一类是化身和包装器，还有三个图像。你有什么可以这样重复的解决方案吗？我意识到这很难…@ProgrammingTree请发布一个更大的渲染html块，这样我就可以看到它看起来像我不想失去你复杂的PHP代码。我有三个while循环，一个用于检查是否喜欢某部电影，然后是共享类似喜好的用户的朋友，然后是用户的详细信息。这就是为什么我不能将代码放在while循环之外。通常我可以，但我要处理三个while循环。关于HTML，您需要代码的哪一部分？这些化身不是电影中的孩子。你想通过绝对值让他们成为电影的孩子吗？@ProgrammingTree那么化身与某部电影有什么关系呢。。。为了告诉我如何构造CSS，我需要查看呈现的html。您发布的屏幕转储显示3部电影，该标记在浏览器中是什么样子的？用户可以向其他用户发送好友请求。如果你喜欢一部电影，而你的一些朋友也喜欢同一部电影，那么朋友们的头像就会出现在那部电影中。我将在我的问题中发布标记。。。
<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;
}
<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>