Position von div auf Schwebeflug manipulieren

Ich habe zwei separate divs, die ich in ihren Hover-Zuständen überlappen möchte. Das gelbe Div macht das, aber ich habe Probleme mit dem blauen Div. Wie Sie sehen können, wird es standardmäßig nach rechts erweitert. Gibt es trotzdem, um es nach links zu zwingen, anstatt seinen Behälter anzubauen.Position von div auf Schwebeflug manipulieren

Dies ist ein vereinfachtes Beispiel, mit dem ich arbeite. Leider bin ich mir zu 99% sicher, dass die relative Positionierung auf .work-wrapper zu sagen hat.

https://jsfiddle.net/04vjcfLe/5/

Ich habe auf dem Behälter max-width versucht und ein paar andere Tricks, aber bin jetzt verloren.

.work-container { 
    width: 50%; 
    max-width: 50%; 
} 

.work-wrapper { 
    display: inline-block; 
    position: relative; 
    width: 49%; 
    transition: all ease 0.8s; 
}

Quelle

2016-07-25 Max Power

Lösung 1:

.work-container { 
 
    width: 50%; 
 
    max-width: 50%; 
 
    position: relative; 
 
    height: 100px; 
 
} 
 

 
.work-1, .work-2 { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom:0; 
 
    width: 50%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1:hover, .work-2:hover { 
 
    width: 100%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1:hover + .work-2 { 
 
    width: 0%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1 { 
 
\t background-color: #FEF102; 
 
    left: 0; 
 
} 
 

 
.work-2 { 
 
\t background-color: #4B3E7F; 
 
    right: 0; 
 
}

<div class="work-container"> 
 
    <div class="work-1"></div> 
 
    <div class="work-2"></div> 
 
</div>

Lösung 2:

Bei dieser Lösung gibt es keine absolute oder relative Positionierung, so dass Sie frei, sie zu setzen, wie Sie sie wollen.

.work-container { 
 
    width: 50%; 
 
    max-width: 50%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    height: 100px; 
 
} 
 

 
.work-1, .work-2 { 
 
    width: 50%; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-container .work-1:hover, .work-container .work-2:hover { 
 
    width: 100% !important; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-container:hover .work-1 { 
 
    width: 0%; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-container .work-1:hover + .work-2 { 
 
    width: 0%; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.work-1 { 
 
\t background-color: #FEF102; 
 
    left: 0; 
 
} 
 

 
.work-2 { 
 
\t background-color: #4B3E7F; 
 
    right: 0; 
 
}

<div class="work-container"> 
 
    <div class="work-1"></div> 
 
    <div class="work-2"></div> 
 
</div>

Quelle

2016-07-25 07:09:06

Dank schweben, aber es muss Die Hauptboxen müssen relativ positioniert sein, da ich absolute Divs in ihnen habe. –

@ MaxPower dann sehen Sie die zweite Lösung. Sie sollten in der Lage sein, die genaue Lösung zu finden, die Sie von dort wollen. –

Danke, Alter. Du hast meine Frage beantwortet und hast immer noch ein Problem damit, das in mein Projekt zu implementieren, aber hoffentlich kann ich es herausfinden. –

hinzufügen float:right Klasse Arbeit-2 und z-index:6 .W-2: .Arbeiten-2

.work-container { 
 
    width: 50%; 
 
    max-width: 50%; 
 
} 
 

 
.work-wrapper { 
 
\t display: inline-block; 
 
\t position: relative; 
 
    width: 49%; 
 
\t transition: all ease 0.8s; 
 
} 
 

 
.work-1, .work-2 { 
 
\t transition: all ease 0.8s; 
 
    width: 100%; 
 
    padding-top: 100%; 
 
\t position: relative; 
 
} 
 

 
.work-1 { 
 
\t background-color: #FEF102; 
 
\t z-index: 5; 
 
} 
 

 
.work-2 { 
 
\t background-color: #4B3E7F; 
 
    float:right; 
 
} 
 

 
.w-1:hover .work-1 { 
 
\t width: 202%; 
 
    float:left; 
 
} 
 

 
.w-2:hover .work-2 { 
 
\t width: 202%; 
 
    z-index:6; 
 
}

<div class="work-container"> 
 
<div class="work-wrapper w-1"> 
 
    <div class="work-1"></div> 
 
</div> 
 
<div class="work-wrapper w-2"> 
 
    <div class="work-2"></div> 
 
</div> 
 
</div>

Quelle

2016-07-25 07:18:51

Beachten Sie, dass aufgrund der Tatsache, dass die Z-Indizierung nicht übersetzbar ist, eine Diskontinuität auftritt, wenn Sie den Mauszeiger nicht mehr bewegen. –

Funktioniert gut, musste aber Deny die Antwort geben. +1 obwohl :) –

Position von div auf Schwebeflug manipulieren

Antwort

Verwandte Themen