Pozycjonowanie obrazków i przycisków TYLKO wewnątrz diva

Question

Witam.
Mam taki banalny problem i wiem jak go wykonać, ale zależy mi na innym sposobie wykonania.
Chodzi mi o pozycjonowanie obrazków i przycisków wewnątrz diva.
Na środku podstrony mam obszar o szerokości 1000px i wysokości 322px z szarym tłem, na którym chciałbym umieścić obrazki i przyciski.
Dokładnie chodzi mi o to, abym mógł pozycjonować obrazki i przyciski tylko w tym divie, a nie na całej podstronie.
Aktualnie zastosowałem position: absolute, ale przy pomocy tego sposobu pozycjonowania, to te przyciski i obrazki mogę pozycjonować na całej podstronie.
Co muszę poprawić w kodzie, abym mógł pozycjonować te obrazki i przyciski TYLKO w środku tego diva?

<div class="content">
				
	<a href="podstrona2.php"><div class="button" style="position: absolute; left: 250px; top: 212px">Przycisk1</div></a>
	<img src="obrazek1.jpg" width="42px" height="31px" style="border: 1px solid #000000; position: absolute; left: 186px; top: 209px" />
			
</div>

.content
{
	clear: both;
	width: 1000px;
	height: 322px;
	background-color: #808080;
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
}

.button
{
	color: white;
	background-color: #006633;
	font-size: 12px;
	float: left;
	width: 90px;
	line-height: 27px;
	text-align: center;
	outline-style: outset;
}

Brałem pod uwagę position: relative, ale ten sposób pozycjonowania robił bałagan w środku diva.
Zależy mi, abym ustalając pozycjonowanie obrazka i przycisku, np. wpisując left: 1px oraz top: 1px, to ten obrazek i przycisk ma się znaleźć po lewej na górze.

Answer 1

Nadaj rodzicowi position: relative, wtedy dzieci będą pozycjonowały się absolutnie względem rodzica.

Comments

Jak nadać rodzicowi position: relative w tym moim kodzie?

---

Nadaj divowi "content" position: relative; Dzięki temu, elementy które się w nim znajdują jeśli dostaną position: absolute, to będziesz je pozycjonował względem .content, a nie okna przeglądarki.

 

http://codepen.io/anon/pen/RRKQGb - odkomentuj to position: relative; w .content i zobacz jak to działa.

---

Przy takim zapisie, pozycjonowanie przycisków jest OK:

<div class="content">
                 
	<a href="podstrona2.php"><div class="button" style="position: absolute; left: 70px; top: 20px">Przycisk1</div></a>
	<a href="podstrona2.php"><div class="button" style="position: absolute; left: 70px; top: 70px">Przycisk2</div></a>
	<a href="podstrona2.php"><div class="button" style="position: absolute; left: 70px; top: 120px">Przycisk3</div></a>
	<a href="podstrona2.php"><div class="button" style="position: absolute; left: 70px; top: 170px">Przycisk4</div></a>
	<a href="podstrona2.php"><div class="button" style="position: absolute; left: 70px; top: 220px">Przycisk5</div></a>
	<a href="podstrona2.php"><div class="button" style="position: absolute; left: 70px; top: 270px">Przycisk6</div></a>
             
</div>

.content
{
	clear: both;
	width: 1000px;
	height: 322px;
	background-color: #c0c0c0;
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
	position: relative;
}

Pozostało jeszcze pozycjonowanie obrazków. Połowa roboty już wykonana.

Answer 2

Dla pozycjonowanego elementu daj position:relative; :)

Comments

Zastosowałem position: relative dla przycisków i nie jest dobrze:

<div class="content">
                 
	<a href="podstrona2.php"><div class="button" style="position: relative; left: 70px; top: 20px">Przycisk1</div></a>
	<a href="podstrona2.php"><div class="button" style="position: relative; left: 70px; top: 70px">Przycisk2</div></a>
	<a href="podstrona2.php"><div class="button" style="position: relative; left: 70px; top: 120px">Przycisk3</div></a>
	<a href="podstrona2.php"><div class="button" style="position: relative; left: 70px; top: 170px">Przycisk4</div></a>
	<a href="podstrona2.php"><div class="button" style="position: relative; left: 70px; top: 220px">Przycisk5</div></a>
	<a href="podstrona2.php"><div class="button" style="position: relative; left: 70px; top: 270px">Przycisk6</div></a>
             
</div>

Przycisk1 jest OK, ale Przycisk2 - Przycisk6 coraz bardziej schodzi w prawo, a przecież do każdego wpisałem left: 70px.

---

pokaż klasę button i content

u mnie na codepenie wszystko działa, więc tam musi być coś nie tak.http://codepen.io/anon/pen/pbRayr

---

Tu masz klasę content i button:

.content
{
	clear: both;
	width: 1000px;
	height: 322px;
	background-color: #808080;
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
}

.button
{
	color: white;
	background-color: #006633;
	font-size: 12px;
	float: left;
	width: 90px;
	line-height: 27px;
	text-align: center;
	outline-style: outset;
}

Wklej kod tutaj albo na jsfiddle, bo na codepen.io nie widzę kodu.

---

Przyczyną problemu jest float: left. Usuń to, w tym przypadku to jest Ci zupełnie niepotrzebne a w dodatku wszystko psuje.

---

Usunąłem float: left z diva "button":

.button
{
	color: white;
	background-color: #006633;
	font-size: 12px;
	width: 90px;
	line-height: 27px;
	text-align: center;
	outline-style: outset;
}

 

---

No i powinno działać. Przed chwilą testowałem i było ok.

---

Z przyciskami jest już OK. Pozostało mi pozycjonowanie obrazków.

---

No panie no to background-image dla diva dajesz, position relative i gotowe

---

Poradziłem już sobie z pozycjonowaniem obrazków.

Panowie, dzięki za pomoc.