Absolūtā pozicionēšana

Kavacky · October 10, 2007

Problēma sekojoša: ir inline elements ( ) ar relatīvu pozīciju, kurā atrodas vēl viens , kas nopozicionēts absolūti ( + liels z-index ), lai varētu to parādīt kā popupu ( slēgājot ar JS display: block/none ). Tekstā šādas kombinācijas ik pa brīdim atkārtojas vairākas reizes.

<span id="outer_<x>"><span id="popup_<x>">blablabla</span>teksts</span>

Ar FF viss strādā ok, pirmā problēma rodas ar IE - tas norenderē relatīvi pozicionētos pat cauri popupam ( cik noprotu, tad tāpēc, ka inline elementiem nepienākas tikt pozicionētiem relatīvi ). To sanāca apiet ( gan IE6, gan IE7 ), pēc noklusējuma ārējiem iem atstājot "position: static" ( tb defaulto ), bet uz popupa parādīšanu aktīvajam uzstādīt pozīciju uz relative, lai tiktu pareizi novietots popups, bet citi i nespīdētu cauri ( jo tiem joprojām ir pareiza "position: static" un renderējas pareizi ).

Bet Operā tāds triks cauri neiet ne vella, jo absolūti nopozicionētu kategoriski nerāda, ja tas atrodas relatīvi pozicionētā inline elementā -> attiecīgi arī JavaScripta joks nedarbojas, jo elements vienkārši uz to brīdi, kamēr ārējo u nostāda relatīvi, pazūd.

Kādam nav kāda ideja, kā Operu apčakarēt? Pozicionēt ar JS pēc kursora neder, jo tad popapa pozīcija attiecībā pret to saturošo u mainās, bet vajag, lai popups vislaik parādās vienā un tajā pašā vietā. Bet, pozicionējot iekšējo u pēc ārējā a pozīcijas, Opera gļukaini renderē brīdī, kad popaps pazūd - dažās vietās netiek pārrenderēts laukums ar "pazudušo" popapu un izskatās neglīti.

player · October 10, 2007

vajaga paraadiit uzliec publiskai apskatei to probleemu izsteelojoties gruuti saprast

meginaaji divaa likt tos spanus?

mefisto · October 10, 2007

Kāpēc tev vispār vajag position: relative ? CSS nemāki ?

marcis · October 11, 2007

ja jau tev viņu vienā vietā tikai vajag, tad kapēc nenovietot divu ar position:absolute??

Kavacky · October 18, 2007

Kāpēc tev vispār vajag position: relative ? CSS nemāki ?

Nē, tieši otrādi - es CSS māku, tāpēc zinu, kā jāveic absolūtā pozicionēšana.

ja jau tev viņu vienā vietā tikai vajag, tad kapēc nenovietot divu ar position:absolute??

Kā jau sākumā teicu ( "Tekstā šādas kombinācijas ik pa brīdim atkārtojas vairākas reizes." ), tas nav tikai vienā vietā, un tās vietas mainās - tas nav kaut kāds statisks gabals, kuru vienreiz uztaisa, bet gan dinamisks contents.

Tātad, testcase izskatās šādi ( nav citur, kur ērti ielikt kodu, lai citiem pēc tam nav čakars noseivot :):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test - CSS Opera/IE laža</title>	
<style>
body
{
	font-size: 16px;
}

#wrapper
{
	border: 1px solid #FF0000;
	height: 300px;
	margin: 0 auto;
	width: 700px;
}

#teksta_konteiners
{
	border: 1px solid #00FF00;
	position: relative;
	left: 40px;
	top: 40px;
	width: 660px;
}

.links
{
	border: 1px solid #0000FF;
	position: relative;
}

.links span
{
	background: #FFFFCC;
	border: 1px solid #CCCCCC;
	position: absolute;
	top: 20px;
	z-index: 99;
}

.links a
{
	color: #F00;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="teksta_konteiners">
	Teksta blāķis teksta blāķis teksta <span class="links"><span>popaps, kuram pāri rādās zemāk esošais links (uz IE)</span><a>links</a></span>
	 blāķis teksta blāķis  <span class="links"><span>popaps</span><a>links</a></span> 
	 teksta blāķis teksta blāķis teksta blāķis <span class="links"><span>popaps</span><a>links</a></span>
	  teksta blāķis teksta <span class="links"><span>popaps</span><a>links</a></span> 
	  blāķis <span class="links"><a>links, kurš rādās pāri popupam</a></span> 
	  teksta blāķis.
</div>
</div>
</body>
</html>

Vispirms šo var apskatīties ar FF un redzēt, ka popapu ( nu tie tagad nav popapi, bet principā jābūt ) dzeltenās kastītes rāda tā, ka linki zemā cauri tām nespīd. Tālāk atveram ar IE - opā, sarkanie linki vietām ir redzami cauri. Bet, kā jau minēju, ar JavaScriptu to viegli var novērst. Problēmas rodas ar Operu, kura tos popapa boxus nopozicionē pēc #teksta_konteiners ( un laikam tāpēc, ka tas ir pēdējais elements, kas ir ar "display: block" un "position: relative" ). Ja mēģina popapa aptverošo span`u pārvērst par div, bet nolikt kā inline, nekas nemainās - rāda ne tur, kur vajag.

Tātad - kādam ir kāda ideja, kā šitās popup kastes nolikt kā nākas tīri ar CSS ( ar JavaScriptu atradu vienu čerez ž veidu, kura sīkais gļuks ir nenozīmīgs pagaidām, bet gribētos kā labāk atrast ).

nemec · October 19, 2007

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test - CSS Opera/IE laža</title>

<style>

body

{

font-size: 16px;

}

#wrapper

{

border: 1px solid #FF0000;

height: 300px;

margin: 0 auto;

width: 700px;

}

#teksta_konteiners

{

border: 1px solid #00FF00;

position: relative;

left: 40px;

top: 40px;

width: 660px;

}

.links

{

display: inline-block !important;/*this for opera, IE this support buggy*/

display: inline;

position: relative !important;/*this for IE, problems with z-index*/

position: static;

border: 1px solid #0000FF;

}

.links span

{

display: block;

background: #FFFFCC;

border: 1px solid #CCCCCC;

position: absolute;

margin-top: 20px;

z-index: 99;

}

.links a

{

color: #F00;

}

</style>

</head>

<body>

<div id="wrapper">

<div id="teksta_konteiners">

Teksta blāķis teksta blāķis teksta popaps, kuram pāri rādās zemāk esošais links (uz IE)<a>links</a>

blāķis teksta blāķis popaps<a>links</a>

teksta blāķis teksta blāķis teksta blāķis popaps<a>links</a>

teksta blāķis teksta popaps<a>links</a>

blāķis <a>links, kurš rādās pāri popupam</a>

teksta blāķis.

</div>

</div>

</body>

</html>

nemec · October 19, 2007

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Test - CSS Opera/IE laža</title>	
<style>
 body
 {
	 font-size: 16px;
 }

 #wrapper
 {
	 border: 1px solid #FF0000;
	 height: 300px;
	 margin: 0 auto;
	 width: 700px;
 }

 #teksta_konteiners
 {
	 border: 1px solid #00FF00;
	 position: relative;
	 left: 40px;
	 top: 40px;
	 width: 660px;

 }

 .links
 {
	 display: inline-block !important;/*this for opera, IE6 this support buggy*/
	 display: inline;
	 border: 1px solid #0000FF;
 }
 html>/**/body .links
 {
	 position: relative;/*this for all modern browsers without IE7*/
 }

 .links span
 {
	 display: block;
	 background: #FFFFCC;
	 border: 1px solid #CCCCCC;
	 position: absolute;
	 margin-top: 20px;
	 z-index: 99;
 }

 .links a
 {
	 color: #F00;
 }
</style>
</head>
<body>
<div id="wrapper">
 <div id="teksta_konteiners">
	 Teksta blāķis teksta blāķis teksta <span class="links"><span>popaps, kuram pāri<br /><br /> rādās zemāk esošais links (uz IE)</span><a>links</a></span>
	  blāķis teksta blāķis  <span class="links"><span>popaps</span><a>links</a></span>
	  teksta blāķis teksta blāķis teksta blāķis <span class="links"><span>popaps</span><a>links</a></span>
	   teksta blāķis teksta <span class="links"><span>popaps</span><a>links</a></span>
	   blāķis <span class="links"><a>links, kurš rādās pāri popupam</a></span>
	   teksta blāķis.
 </div>
</div>
</body>
</html>

mazliet pielaboju, jo IE7 atkal ieliidis tur kur vinjam nevajag

Edited October 19, 2007 by nemec

andrisp · October 19, 2007

nemec, lūdzu, izmanto paste.php.lv priekš gariem kodiem.

Un ja tomēr gribi peistot tepat, tad izmanto code nevis quote bbtagu. Savādāk indentācija pazūd. Un tas būtu arī loģiskāk.

Edited October 19, 2007 by andrisp

Kavacky · October 23, 2007

Wunderbar, paldies!

Viltīgi ar to inline-block. Labākais tas, ka pats arī tā vienbrīd iemēģināju, bet kaut kas tur nebija riktīgi un man pašam nenostrādāja.

Sign In

Absolūtā pozicionēšana

Recommended Posts

Kavacky

Link to comment

Share on other sites

player

Link to comment

Share on other sites

mefisto

Link to comment

Share on other sites

marcis

Link to comment

Share on other sites

Kavacky

Link to comment

Share on other sites

nemec

Link to comment

Share on other sites

nemec

Link to comment

Share on other sites

andrisp

Link to comment

Share on other sites

Kavacky

Link to comment

Share on other sites

Browse

Activity