Nachodzenie na siebie elementów

pytanie zadane 16 stycznia 2017 w HTML i CSS przez kubekzone Użytkownik (620 p.)
edycja 16 stycznia 2017 przez kubekzone

Witam, mam obiekt w svg zawarty w divie (.container). Chciałbym żeby inne elementy w divie .container nie traktowały tego <svg> blokowo, tj. żeby traktowały go jako tło 'containera' (nachodziły na niego). Da się tak zrobić? Zobrazuję problem graficznie :D

Jeszcze podsyłam kod do html i ccs:

<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<title>tytuł</title>
	<meta name="description" content="Opis strony w wyszukiwarce." />
	<meta name="keywords" content="słowa kluczowe, strona, html" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<link rel="stylesheet" href="style.css" type="text/css"/>
	
</head>
<body>
	<div class="container">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<div style="clear:both;" />
		<center>
		<svg height="400" width="500">
			<path class="line1" d="M 100 350 l 150 -250 l 150 250 Z" />
		</svg>
		</center>	
		
	</div>
</body>
</html>

.container	{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	border: 1px dotted black;
}

.line1 {
	stroke: black;
	stroke-width: 3;
	fill: none;
}

.div1 {
	margin-top: 100px;
	float:left;
	width: 998px;
	height: 50px;
	border: 1px dotted black;
	background-color: #c34f4f;
}

.div2 {
	width: 498px;
	height: 50px;
	float:left;
	border: 1px dotted black;
	background-color: #c34f4f;
}

.div3 {
	width: 498px;
	height: 50px;
	float:left;
	border: 1px dotted black;
	background-color: #c34f4f;
}

2 odpowiedzi

odpowiedź 16 stycznia 2017 przez niezalogowany
wybrane 16 stycznia 2017 przez kubekzone

Najlepsza

Nadaj obiektowi svg właściwości w CSS:

position: fixed;
left: 0;
right: 0;
margin: 0 auto;
z-index: -100;

...oraz przenieś go w HTML pod linię <div class="container">.

komentarz 16 stycznia 2017 przez kubekzone Użytkownik (620 p.)

Dzięki, w między czasie też rozwiązałem problem właśnie przez pozycjonowanie ale Twój kod lepiej działa :P

btw da się ustawić żeby punktem odniesienia pozycjonowania nie były krawędzie ekranu tylko np. krawędzie diva 'container' ?

1	komentarz 16 stycznia 2017 przez Czort Nałogowiec (32,500 p.) position:relative dla .container

2	komentarz 16 stycznia 2017 przez Comandeer Guru (601,110 p.) Tak, nie korzystająć z position: fixed. Wystarczy dla .container nadać position: relative a dla svg position: absolute.