nachodzący obrazek

pytanie zadane 26 czerwca 2020 w C i C++ przez Szarlotka Użytkownik (890 p.)

Chciałabym, aby dwa ostatnie obrazki na stronie na siebie nachodziły tak jak na obrazku. Jak to zrobić?

<html>
<head>
	<title>Rusty Steele</title>

<link rel="stylesheet" type="text/css" href="dog.css">

	</style>
	</head>
	<body>
	<h1>Rusty Steele</h1>
	<p>Hi, I'm a dog. Woof woof!</p>
	<img src="https://i.imgur.com/OKs4l4k_d.webp" class="center" width="150">
<div>
			<h3><strong>Some of my favourite places: </strong></h3>
			<ul>
				<li>The beach</li>
				<li>The dog park</li>
				<li>The fire hydrant</li>
			</ul>
</div>
			<h2>Make sure to follow me on <a href="https://www.instagram.com/dogs.lovers/" target="blank">Instagram</a></h2>

			<table>

				<thead> 
					<tr> 
					<th>Number</th>
					<th>Breed</th>
					<th>Country of origin</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>1.</td>
					<td>French Bulldog</td>
					<td>England</td>
				</tr>
				<tr>
					<td>2.</td>
					<td>Labrador</td>
					<td>Unknown</td>
				</tr>
				<tr>
					<td>3.</td>
					<td>Border collie</td>
					<td>New Zealand
				</tr>
				<tr>
					<td>4.</td>
					<td>Shiba Inu</td>
					<td>Japan</td>
				</tr>
				<tr>
					<td>5.</td>
					<td>German Shepherd</td>
					<td>Germany</td>
				</tr>
				<tr>
					<td>6.</td>
					<td>Pomeranian</td>
					<td>Pomerania</td>
				</tr>
			</tbody>
				</table>

		<img src="https://i.imgur.com/N1XN2Jo.jpg" class="center" width="150" height="150">
		<img src="https://i.imgur.com/LN1DInO.jpg" class="center" width="150" height="150">

	</body>
</html>

	li {
		color: saddlebrown;
		border-color: saddlebrown;
		border-width: 0.5px;
		border-style: solid;
		line-height: 80%;
		margin-left: 100px;
	}
	body {
		background-color: moccasin;
	}
	div {
		background-color: burlywood;
	}
	table {
  		border-collapse: collapse;
	}
	table, th, td {
  		border: 1px solid black;
	}
	.center {
  		display: block;
  		margin-left: auto;
  		margin-right: auto;
	}

2 odpowiedzi

odpowiedź 26 czerwca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

position: relative

komentarz 26 czerwca 2020 przez Szarlotka Użytkownik (890 p.)

hm, a coś więcej?

komentarz 26 czerwca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

wrzuć kod na codepen lub https://jsfiddle.net/

komentarz 26 czerwca 2020 przez Szarlotka Użytkownik (890 p.)

https://codepen.io/diana-larussa/pen/OJMjpEL

komentarz 26 czerwca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Dodaj sobie do tego zdjęcia jakiś id np img2 i dalej daj taki kod

#img2 {
  position: relative;
  top: -40px;
  left: 40px;
}

komentarz 26 czerwca 2020 przez Szarlotka Użytkownik (890 p.)

A czemu -40?

komentarz 26 czerwca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Tam może być dowolna wartość, chciałaś aby było tak jak na obrazku więc dla mnie -40 sprawia, że jest tak jak na obrazku ale oczywiście możesz to zrobić jak chcesz...

1	komentarz 26 czerwca 2020 przez Szarlotka Użytkownik (890 p.) Okej juz dziala, dziekuje bardzo

odpowiedź 26 czerwca 2020 przez Szarlotka Użytkownik (890 p.)

Czy ktoś może pomóc??

komentarz 26 czerwca 2020 przez VBService Ekspert (254,480 p.)

O to chodziło?

....
    </table>
    <div class="center wrap">
	  <img src="https://i.imgur.com/N1XN2Jo.jpg" class="pic1" width="150" height="150">
	  <img src="https://i.imgur.com/LN1DInO.jpg" class="pic2" width="150" height="150">
    </div>
	</body>
</html>


....
.wrap {
  display: block;
  background-color: transparent;
  width: 220px;
}
.wrap img {
  position: relative;
}
.pic1 {
  z-index: 1;
}
.pic2 {
  left: 50%;
  z-index: 2;
  transform: translateY(-50%);
}