login  Naam:   Wachtwoord: 
Registreer je!
 Forum

z-index (Opgelost)

Offline qubus - 05/11/2014 20:22
Avatar van qubusLid Ik wil een animatie met keyframes toevoegen aan een site.
Zie als test http://muziek.qobus.nl
Het gaat om de microfoon linksboven.
Probleem is dat hij vóór de container met tekst staat. Ik heb al van alles geprobeerd met z-index, maar hij blijft voor de rest staan.
Iemand een idee?

6 antwoorden

Gesponsorde links
Offline Thomas - 05/11/2014 20:52
Avatar van Thomas Moderator linksboven? rechtsboven?

Als ik hier snel doorheen fiets met firebug dan zie ik dat:
- de z-index van #container is -10
- de z-index van je header is -9
- de z-index van wrapper_top (en hierin je microfoon-div) hebben z-index auto
al deze elementen staan in elkaar genest.

Dus het is vrij logisch dat microfoon + koptelefoon voor de rest blijven staan?

Hoe hoger de z-index, hoe verder op de voorgrond.

Wellicht is de verwarring ontstaan omdat je negatieve z-indices gebruikt (waarom dat dan eigenlijk?).

Ook wil je dit soort rondfladderende elementen misschien loskoppelen van de "flow" van de rest van je pagina, en dus buiten elk ander element plaatsen (niet binnen een andere div).
Offline qubus - 05/11/2014 21:02
Avatar van qubus Lid Hallo FangorN,

Rechtsboven natuurlijk...;) foutje
Die z-indexen in de min heb ik gedaan in het van alles proberen, geen verdere reden.
Ik wil graag dat de inlogbox vóór de microfoon komt te staan, en de microfoon inderdaad zoals nu vóór de header. Nu staat de inlogbox er achter, en die wil met geen mogelijkheid naar voren 
Als ik de wrapper-top uit de header haal, schuift deze op naar beneden, zoals nu te zien op die link.
En die krijg ik dan weer niet omhoog... ik wordt er gek van.

Dank alvast voor je inspanningen !
Offline Thomas - 05/11/2014 21:22 (laatste wijziging 05/11/2014 21:32)
Avatar van Thomas Moderator Als je een element absoluut positioneert ten opzichte van een parent element met relatieve positionering, dan neemt dit absoluut gepositioneerde element geen "ruimte" in, waarschijnlijk wil je dat doen. Ik weet dan niet of je animatie nog goed gaat.

Ook zou je er (waarschijnlijk) voor moeten zorgen dat je formulier dezelfde relatieve parent heeft, deze staat nu in een andere parent div (een html element genaamd "article"?).

Ik kan weinig chocola maken van deze structuur eerlijk gezegd.

EDIT Dit werkt ongeveer:
voeg aan #container toe: position: relative;
verander in wrapper_top je position naar absolute
voeg aan je div waarin je formulier staat position: absolute toe.

Dan ff right, top, margins en (mogelijk) z-indexen aanpassen en klaar.
Bedankt door: qubus
Offline Wijnand - 06/11/2014 08:56
Avatar van Wijnand Moderator Op dit moment zie ik helemaal geen 'wrapper_top'. Werkt het alweer qubus en heb je het anders opgelost ofzo?
Offline Thomas - 06/11/2014 12:32
Avatar van Thomas Moderator Het lijkt alsof de microfoon/koptelefoon (wrapper)div (tijdelijk) is verwijderd.
Offline qubus - 06/11/2014 19:07
Avatar van qubus Lid @wijnand, klopt, ik was er mee bezig en had op een gegeven moment de hele layout naar de ...
Maar met de tips van FangorN is het nu gelukt!
Top mannen, heel erg bedankt weer.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.164s