CSS，PHP:图像在图像之上，不同

CSS, PHP: Image on top of image, different

本文关键字：图像 不同 CSS PHP      更新时间：2023-09-26


我正在做一个学校项目，但我有一个小css问题，我自己无法解决。我用display: inline-block;和position: absolute; and position: relative;尝试了很多方法，但都没能弄清楚。我希望你能帮助我：正如你在片段中看到的那样，我有牌，玩家的脸——玩家的脸在正确的高度上，等等。但我希望它们出现在每张牌的顶部。有人能帮我吗？

.card-color{
        position: relative;
        height: 300px;
        width: 200px;
        float: left;
    }
	.card-img{
        position: relative;
        height: 300px;
        width: 200px;
        float: left;
    }
    .cardtype{
        position: absolute
    }
    .face16{
        position: absolute;
        top: 32px;
        right: 10px;
    }
<html>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />
<head>
<link rel="stylesheet" href="stylez.css">
<title>1</title>
<div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold0.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold0.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold0.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold0.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/gold1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/silver0.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/silver0.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/silver0.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/silver1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/silver1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/silver1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/bronze1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/bronze1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/bronze1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/bronze1.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/bronze0.png'></div><div class='card-color'><img class='cardtype' src='http://jterweele.informatica.bc-enschede.nl/img/bronze1.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/176635-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/184941-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/146562-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/53612-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/186561-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/165229-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/189461-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/164859-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/45119-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/158626-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/8473-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/186153-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/178509-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/198784-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/186115-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/150516-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/156722-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/176550-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/163423-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/177604-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/204713-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/189271-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/205989-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/206113-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/196932-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/202053-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/196935-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/202811-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/216699-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/203747-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/199830-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/213418-large.png'></div><div class='card-img'><img class='face16' src='http://packarmy.nl/packs/playeravatars/224130-large.png'></div></head>
<body>
</body>
</html>

谢谢，Julan

在定位的父级中，

position: absolute;您的卡，并将top:和left:属性设置为0px。

你也不能用</head>结束你的身体内容：）

您的HTML应该位于<body>标记内。

http://jsbin.com/xucaza/2/edit?html，css，js，输出

您的HTML设置不正确，无法以最佳方式执行您想要的操作。此外，您的CSS代码中缺少分号。

您应该将类.card-img的div移到类.card-color的div中，并将其移到它们前面。

我还在这里给你做了一把小提琴http://jsfiddle.net/2urt8wtf/1/.它需要一点CSS从你的部分抽搐，但这是解决方案。

你必须知道绝对位置总是取决于位置相对的没有彼此，它们就不会很好地工作。

此外，div元素应该位于body标记之间，head标记应该位于script标记、meta标记和title标记周围，而不是现在的内容。

相关文章：