Chciałbym stworzyć paradoksalny efekt poprzez właściwość z-index
CSS .
W moim kodzie mam pięć okręgów, jak na poniższym obrazku, i wszystkie one są absolutnie ustawione bez zdefiniowania z-index
. Dlatego domyślnie każde koło nakłada się na poprzednie.
W tej chwili okrąg 5 zachodzi na okrąg 1 (lewy obraz). Paradoks, który chciałbym osiągnąć, to mieć jednocześnie kółko 1 pod okręgiem 2 i nad okręgiem 5 (jak na prawym obrazku).
(źródło: schramek.cz )
Oto mój kod
Narzut:
<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div class="item i5">5</div>
CSS
.item {
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid red;
background: silver;
border-radius: 50%;
text-align: center;
}
.i1 { position: absolute; top: 30px; left: 0px; }
.i2 { position: absolute; top: 0px; left: 35px; }
.i3 { position: absolute; top: 30px; left: 65px; }
.i4 { position: absolute; top: 70px; left: 50px; }
.i5 { position: absolute; top: 70px; left: 15px; }
Przykład na żywo jest również dostępny pod adresem http://jsfiddle.net/Kx2k5/ .
Wypróbowałem wiele technik układania zamówień, zestawiania kontekstu i tak dalej. Czytałem kilka artykułów na temat tych technik, ale bez sukcesu. Jak mogę to rozwiązać?
Odpowiedzi:
Oto moja próba: http://jsfiddle.net/Kx2k5/1/
(z powodzeniem przetestowany na
Fx27
,Ch33
,IE9
,Sf5.1.10
iOp19
)CSS
Zasadniczo
:after
nałożyłem pseudoelement na pierwszy okrąg (z odziedziczonymi niektórymi właściwościami), a następnie przyciąłem go doclip()
właściwości, więc pokazuję tylko jego dolną część (gdzie koło#1
zachodzi na okrąg#5
).Do właściwości CSS użyłem tutaj przykład ten powinien pracować nawet w IE8 (
box-sizing
,clip()
,inherit
, i są tam pseudoelements obsługiwane)Zrzut ekranu z efektem
źródło
Moja próba również użycia
clip
. Chodziło o to, aby mieć pół na pół nadiv
. W ten sposób ustawieniez-index
zadziała.Możesz więc ustawić górną część na,
z-index: -1
a dolną naz-index: 1
.Wynik:
DEMO TUTAJ
Uwaga: testowano w IE 10+, FF 26+, Chrome 33+ i Safari 5.1.7+.
źródło
Oto moja propozycja.
Używam również pseudoelementu umieszczonego na górze pierwszego koła, ale zamiast używać klipu, zachowuję jego przezroczyste tło i po prostu nadaję mu cień pola, który pasuje do koloru tła kół (srebrny), a także czerwony obramowanie, aby zakryć prawe dolne boki obramowania koła.
Próbny
CSS (różni się od punktu początkowego)
Produkt finalny
źródło
Niestety, poniższa odpowiedź jest tylko teoretyczną odpowiedzią, ponieważ z jakiegoś powodu nie mogę zabrać się
-webkit-transform-style: preserve-3d;
do pracy (muszę popełnić jakiś oczywisty błąd, ale nie mogę tego rozgryźć). Tak czy inaczej, po przeczytaniu twojego pytania - jak z każdym paradoksem - zastanawiałem się, dlaczego to tylko pozorna niemożliwość, a nie rzeczywista. Po kolejnych kilku sekundach uświadamiam sobie, że w rzeczywistości liście są nieco obrócone, dzięki czemu coś takiego istnieje. Więc chciałem wymyślić prostą demonstrację tej techniki, ale bez poprzedniej właściwości jest to niemożliwe (zostaje przyciągnięta do płaskiej warstwy macierzystej). Tak czy inaczej, oto kod podstawowyA css:
Pełny kod możesz znaleźć tutaj .
źródło
JS Fiddle
HTML
CSS
źródło
item2
iitem3
. A także przeniósłposition: absolute
się.ix
i#five
naitem
,item2
iitem3
JS Fiddle LIVE DEMO
Działa również na IE8.
HTML
CSS
źródło