Miten saan z-indeksoidun layerin "liikkumaan" sivua alas- ja ylöspäin skrollatessa? Eli tarkoitus ois, että tämä absoluuttisesti asemoitu layeri (top: 20px; right: 20px;) pysyis ikään kuin koko ajan tossa samassa nurkassa, kun skrollaan sivua alas- tai ylöspäin _EIKÄ_ jäis paikalleen alaspäin skrollatessa häviten kokonaan näkyvistä, mikäli sivu on tarpeeksi iso pituussuunnassa?
Jos ymmärsin oikein niin sehän onnistuu CSS-määrityksellä position: fixed. IE ei tosin taida tykätä siitä mutta googlettamalla löytää siihen ratkaisun takuuvarmasti heti.
Eipä tuu kuhaa ikinä luettua. Meinasin tässä viel mainita et IE7:ssa saattaa toimia. Oiskii tullu sit jo melkei sanatarkasti samat jutut :D
IE:ssä saa toimimaan myös CSS:n kautta joskin käyttäen Microsoftin omia expression-lisäkomentoja. Periaatteessa ne toimii siten, että annetaan vähän JavaScriptiä ja johan lyyti kirjoittaa. Muille selaimille kerrotaan fixed, IE:lle absolute.
<html>
<head>
<title>Testi</title>
<style type="text/css">
body { padding-bottom : 2000px;}
#paikka { background : black; height : 200px; left : 500px; position : fixed; top : 5px; width : 200px; }
</style>
<!--[if lt IE 7]><style>
body { background : url('/') no-repeat fixed 0 0; }
#paikka { position : absolute; top : expression(eval('5 + document.body.scrollTop')); }
</style><![endif]-->
</head>
<body>
<div id="paikka"> </div>
<h1>Pelottavaa</h1>
<p>Kaikkea sitä keksitäänkin.</p>
</body>
</html>Tuo backgroundin laittaminen, vaikka siinä onkin korruptia dataa, pitää huolen siitä ettei laatikko "jää jälkeen" kun sivua vierittää.
Muoks!
z-index on epäluotettava, ei sen takia etteikö se toimisi, vaan sen takia että kaikki selaimet eivät oikein tajua sitä. Pahin tapaus taitaa olla Opera, jolla on välillä aivan käsittämättömiä väärinymmärryksiä ja tottelemattomuuksia (siis tässä asiassa, vaikka siinä on muitakin ärsyttäviä renderöintibugeja ja virheitä toimintalogiikassa). Helpointa saada elementti pysymään aina ylimpänä on laittaa se sivun viimeiseksi elementiksi.
Ja sen jälkeen aiheuttavat select-laatikot ongelmia, IE6:ssa nääs. Ne ovat AINA kaikkein ylimpiä, laittoi niiden päälle mitä tahansa. Ne on ja pysyy ylimpänä ja näkyvät läpi. Eli jos teet jotain, älä ainakaan laita select-laatikoita sivulle.
Hmm. Jostain syystä tuo sinun IE-ratkaisusi ei tulosta näytölleni yhtään mitään. :(
Tämä on vähän mutua, mutta muistaakseni homman sai toimimaan IE:llä niin, että laittoi koko sivun (bodyn sisällön) containerin (div-tagi) sisään ja käsitteli sitä containeria ikäänkuin bodynä, eli kaikki loppu tauhka tulisi sen sisälle.
slitzu: Mielenkiintoista, testasin kyllä sivun kaikilla IE4+ versioilla. Tallensitko tiedoston tiedostopäätteellä .html? .xhtml ei toimi IE:ssä ollenkaan.
http://merri.net/ruudut/testi_ie.jpg
Hyvin tuo näyttäisi näkyvän kaikilla, mitä tietty IE4 on jälkeenjäänyt :)
Minäkin käytän aina #dokumentti tai #document -nimistä diviä päädivinä, johtuen IE:n ja Operan kyvyttömyyksistä käsitellä bodya oikein erilaisissa asettelutilanteissa. Firefox/Gecko toimii lähes poikkeuksetta oikein perusasetteluissa (minkä rankkaan paljon korkeammalle kuin sen, että Opera 9 selviää Acid2:sta).
Aihe on jo aika vanha, joten et voi enää vastata siihen.
