28172 sujets

CSS et mise en forme, CSS3

[Résolu] élément en position relative ET absolue

Bonjour,

J'ai réalisé une barre de recherche un peu comme google, c'est-à-dire que j'ai une textbox et quand on tape une valeur, une "liste déroulante" s'affiche (il s'agit d'un div).
Pour positionner cet élément, j'aimerais utiliser à la fois les propriétés de position relative et position absolue.
Je m'explique :
J'ai besoin de position absolue car la liste ne doit pas décaler les éléments en dessous.
J'ai besoin de position relative car la liste doit être positionnée par rapport à son parent.

Et je sais pas comment faire ça... Smiley decu


Merci d'avance,

Romain
Modifié par rom117 (21 Sep 2011 - 23:16)
Je viens de créer un exemple, et j'ai donné un peu plus d'explication dans mon code Smiley cligne ...

index.html :
<!DOCTYPE HTML><!-- html 5 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>

	<div>
		<p>La hauteur de cet élément peut changer !</p>
	</div>

	<div>
		<label for="lectureSupportTextBox1">Lecture support:</label>
		<input type="text" id="lectureSupportTextBox1" name="lectureSupportTextBox1" style="width:300px" />
		<div id="lectureSupportList1" class="lectureSupportList">
			<ul>
				<li>Test 1</li>
				<li>Test 2</li>
			</ul>
		</div>

		<p>Ce contenu s'affiche sous la liste déroulante et c'est exactement ce que je veux !</p>
		<p>Par contre, comme lectureSupportList1 est en positionnement absolu, si je décale un élément de la page avant cette liste (avec du javascript par exemple), eh bien ma liste sera décalée -> PROBLEME !!</p>
	</div>

</body>

</html>


css.css :
p
{
	border: 1px solid black;
}

.lectureSupportList
{
	color: #636363;
	background-color: white;
	font-family: Arial,Helvetica,sans-serif;
	font-size: .9em;	
	width: 302px; 
	border: 1px solid black;
	overflow: hidden;
	z-index: 10;
	position:absolute;
	top:77px;
	left:115px;
}

.lectureSupportList li 
{
	padding: 2px 5px;
	line-height: 1.2em;
	white-space: nowrap;
}

.lectureSupportList li:hover
{
	background-color:#0C70B4;
	color:#fff;
	cursor:pointer;
}

.lectureSupportList ul 
{
	margin: 0;
	margin-left: -30px;
	list-style-type: none;
}



Merci d'avance,

Romain
Modifié par rom117 (21 Sep 2011 - 23:03)
Modérateur
Bonjour,

rom117 a écrit :

J'ai besoin de position absolue car la liste ne doit pas décaler les éléments en dessous.
J'ai besoin de position relative car la liste doit être positionnée par rapport à son parent.


La position absolue doit être appliquée à l'élément en question. La position relative doit s'appliquer à l'élément parent. Comme l'élément enfant est en absolu et que son parent en relative, il se positionnera en absolu par rapport au parent.

Je t'invite à lire avec attention comment fonctionne la position absolute et la position relative qui par son nom, peut facilement porter à confusion.

Pour résumer, en appliquant un position relative à un élément X, on indique que les enfants en absolu de l'élément X se positionneront par rapport à lui. 


<div style="position:relative">
   <div style="position:absolute;right:0;bottom:0">Je me positionne par rapport à mon parent, car c'est le parent en relative le plus près.</div>
</div>

Modifié par Tony Monast (21 Sep 2011 - 23:01)
Bonsoir,

Tony Monast a écrit :


Pour résumer, en appliquant un position relative à un élément X, on indique que les enfants en absolu de l'élément X se positionneront par rapport à lui. 


&lt;div style=&quot;position:relative&quot;&gt;
   &lt;div style=&quot;position:absolute;right:0;bottom:0&quot;&gt;Je me positionne par rapport à mon parent, car c'est le parent en relative le plus près.&lt;/div&gt;
&lt;/div&gt;

Je ne savais pas du tout... J'ai testé et ça marche ! GÉNIAL !!!
Je dormirai moins bête ce soir Smiley cligne .


Merci à vous deux, et merci à ce forum Smiley cligne .

Romain

PS : Quand on fait une citation sur du code, le rendu n'est pas terrible... Administrateur si tu m'entends...
Sujet clos
Aller à