Jeśli muszę #element-one być powyżej #element-two, #element-two być powyżej #element-three, a #element-three być powyżej #element-one, czy jest jakiś sposób to zrobić z CSS? W inny sposób?Czy istnieje sposób na zrobienie kółka z-index?
Nie znam żadnych sposobów, aby to zrobić w CSS lub JavaScript ..
chciałbym podzielić się jeden element na dwie części, bez to zauważone przez użytkownika. (W rzeczywistości nie jest to możliwe w każdym przypadku, na przykład z pól tekstowych, ale działa dobrze z obrazami).
Więc #element-one-part-A jest powyżej #element-two, #element-two jest powyżej #element-three i #element-three jest powyżej #element-one-part-B. Technicznie nie jest to krąg zindeksu, ale wygląda na to.
To niemożliwe. Indeks Z jest jak warstwa Photoshopa, wartość jest tylko pozycją w stosie.
Możesz spróbować oszukać z niektórymi javascript?
Zobacz ten exemple z 4 elementów
<html>
<body>
<div id="container">
<div id="e1" class="common">
this is element 1
this is element 1
this is element 1
</div>
<div id="e2" class="common">
this is element 2
this is element 2
this is element 2
</div>
<div id="e3" class="common">
this is element 3
this is element 3
this is element 3
</div>
<div id="e4" class="common">
this is element 4
this is element 4
this is element 4
</div>
</div>
<style>
html { font-size: 3em;}
.common {
position: absolute;
overflow: hidden;
}
.clone {
color: red;
margin-top: -100%;
background-color: rgba(200, 0, 100, .5) !important;
}
.window {
overflow: hidden;
width: 50%;
height: 50%;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0,0,0, .2);
}
#container {
width: 600px;
height: 600px;
margin: auto;
background: #eee;
position: relative;
}
#e1 {
background: yellow;
color: orange;
width: 100px;
height: 500px;
top: 50px;
left: 100px;
}
#e2 {
background: lightblue;
color: blue;
width: 500px;
height: 100px;
top: 100px;
left: 50px;
}
#e3 {
background: red;
color: pink;
width: 100px;
height: 500px;
bottom: 50px;
right: 100px;
}
#e4 {
background: lightgreen;
color: green;
width: 500px;
height: 100px;
bottom: 100px;
right: 50px;
}
</style>
<script>
(function() {
var clone = document.getElementById('e1').cloneNode(true);
clone.className = 'common clone';
var view = document.createElement('div');
view.className = 'window';
view.appendChild(clone);
document.getElementById('container').appendChild(view);
})();
</script>
</body>
</html>
To jest "z-index", nie "x-index' =) –
houps! wyprostowany ^^ –
To bardzo intrygujące pytanie. Jednakże, w gruncie rzeczy, odpowiedź brzmi: nie, może to być hack, który trochę podstępuje;) Bardzo zainteresowany, aby zobaczyć przyzwoitą odpowiedź tutaj. UWAGA: w twojej próbce masz 3 elementy, co oznaczałoby, że elementy są obracane? i dalej: jaka wersja CSS jest ci potrzebna i czy dozwolony jest włamanie do javascript? –
Nie sądzę, że można to zrobić w określonym czasie. Wymagałoby to jednego elementu, aby mieć wiele wartości indeksu Z. Bardzo ciekawe pytanie, chociaż myślę, że będziesz musiał symulować efekt ... Czy pytasz teoretycznie, czy masz jakieś wymaganie? Jeśli ten ostatni mógłbyś wysłać postpoprawioną wersję do inspekcji? Dzięki! – lnrbob
CSS może czasami być bizantyjski, ale nie sądzę, że jest to zgodne ze standardem tworzenia układu strony [MC Escher] (http://en.wikipedia.org/wiki/M._C._Escher) jako jeszcze. Nawet z CSS 3. –