• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nachodzenie na siebie elementów

VPS Starter Arubacloud
0 głosów
3,940 wizyt
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

+1 głos
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 (599,730 p.)

Tak, nie korzystająć z position: fixed. Wystarczy dla .container nadać position: relative a dla svg position: absolute.

komentarz 16 stycznia 2017 przez Czort Nałogowiec (32,500 p.)
Dokładnie. Z position fixed są jakieś tricki z transform niby ale to chyba gra niewarta świeczki.
komentarz 16 stycznia 2017 przez kubekzone Użytkownik (620 p.)
Dzięki wielkie, pięknie działa ^^
+1 głos
odpowiedź 16 stycznia 2017 przez Comandeer Guru (599,730 p.)
Musiałbyś się pobawić pozycjonowaniem i z-index… Albo zapisać to SVG do osobnego pliku i faktycznie wstawić jako tło przez CSS.

Podobne pytania

0 głosów
3 odpowiedzi 842 wizyt
pytanie zadane 22 kwietnia 2017 w HTML i CSS przez MixTape Użytkownik (560 p.)
0 głosów
1 odpowiedź 149 wizyt
pytanie zadane 16 lipca 2016 w HTML i CSS przez czujek22 Dyskutant (7,670 p.)
0 głosów
0 odpowiedzi 90 wizyt
pytanie zadane 8 kwietnia 2019 w HTML i CSS przez Davidelo18 Użytkownik (660 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...