Positionner un élément HTML par rapport à son conteneur à l’aide de CSS

Question

Positionner un élément HTML par rapport à son conteneur à l’aide de CSS

Demandé el 19 de Septembre, 2008: Quand la question a-t-elle été
78228 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis en train de créer une horizontale 100% empilées-graphique à barres à l'aide de HTML et CSS. J'aimerais créer les barres à l'aide de DIVs avec les couleurs de fond et le pourcentage des largeurs selon les valeurs que je veux graphique. Je veux aussi avoir une grille de lignes pour marquer un point arbitraire de la position le long du graphique.

Dans mon expérimentation, j'ai déjà obtenu les barres d'empiler horizontalement par l'attribution de la propriété css float: left. Cependant, je voudrais éviter que, comme il semble vraiment de jouer avec la mise en page de confondre les moyens. Aussi, les lignes de la grille ne semble pas fonctionner très bien, lorsque les barres sont en circulation.

Je pense que la CSS de positionnement doit être capable de gérer cela, mais je ne sais pas encore comment le faire. Je veux être en mesure de préciser la position de plusieurs éléments par rapport à l'angle supérieur gauche du conteneur. Je rencontre ce genre de problème régulièrement (même en dehors de ce projet graphe), donc je voudrais une méthode:

Croix-navigateur (de préférence sans trop de hacks de navigateur)
S'exécute en mode Quirks
Aussi clair/propre que possible, afin de faciliter les personnalisations
Fait sans Javascript si possible.

Demandé el 19 de Septembre, 2008 par Craig Walker

Answer 1

4 Réponses

Answer 2

405voto

Bryan M. Points 9403

Tu as raison, le positionnement CSS est le chemin à parcourir. Voici une course rapide vers le bas:

position: relative seront mise en page d'un élément par rapport à lui-même. En d'autres termes, les éléments sont disposés dans le flux normal, puis il est supprimé de flux normal et compenser par quelles que soient les valeurs que vous avez spécifiées (en haut, à droite, en bas, à gauche). Il est important de noter que, parce qu'elle est retirée de flux, d'autres éléments autour d'elle ne se déplace pas avec elle (à l'aide des marges négatives au lieu si vous voulez que ce comportement).

Cependant, vous êtes le plus susceptible intéressés en position: absolute qui sera à la position d'un élément par rapport à un conteneur. Par défaut, le conteneur est la fenêtre du navigateur, mais si un élément parent a position: relative ou position: absolute fixés sur elle, puis elle agira en tant que parent pour les coordonnées de position pour ses enfants.

Pour le démontrer:

<div id="container">
   <div id="box"> </div>
</div>

#container {
  position: relative;
}

#box {
  position: absolute;
  top: 100px;
  left: 50px;
}

Donc, dans cet exemple. le coin supérieur gauche de l' #box serait 100px vers le bas et 50px gauche du coin supérieur gauche de l' #container. Si #container n'ont pas d' position: relative ensemble, les coordonnées de l' #box serait par rapport au coin supérieur gauche de la vue navigateur de port.

Espérons que cela aide.

Répondu el 19 de Septembre, 2008 par Bryan M. (9403 Points )

Answer 3

22voto

Stephen Deken Points 2418

Vous devez explicitement définir la position du conteneur parent ainsi que la position du conteneur enfant. La manière classique de faire c’est quelque chose comme ceci :

Répondu el 19 de Septembre, 2008 par Stephen Deken (2418 Points )

Answer 4

3voto

Jim Points 39574

Le positionnement absolu positionne un élément relatif à son plus proche ancêtre positionné. Alors mettez dans le conteneur, puis pour les éléments enfants, et sera, par rapport au haut à gauche du conteneur, tant que les éléments enfants ont . Plus d’informations sont disponibles dans la spécification CSS 2.1.

Répondu el 19 de Septembre, 2008 par Jim (39574 Points )

Answer 5

1voto

Jonathan Arkell Points 4265

Cela devrait exactement ce dont vous avez besoin.

<html>
<head>
    <title></title>
</head>
<style type="text/css">
    #container { position: relative; width: 600px; overflow: hidden; }
	.bar { float:left; height: 20px; border: 1px solid #cc0; background-color: #ff8; margin: 10px 600px 0 0}
</style>

<body>
    <div id="container">
        <div class="bar" style="width: 88%;"></div>
        <div class="bar" style="width: 50%;"></div>
        <div class="bar" style="width: 90%;"></div>
		<div class="bar" style="width: 1%;"></div>
		<div class="bar" style="width: 23%;"></div>
        <div class="bar" style="width: 1%;"></div>
    </div>
</body>
</html>

C'est une mise en œuvre basée sur des flotteurs, mais la clé ici est la 600px de marge sur vos boîtes. Cela devrait retirer le flotteur problèmes de mise en page.

C'est mieux alors absolument positionnement parce que vous n'avez pas à garder une trace de l'endroit où chaque barre sur votre graphique va sur l'axe des ordonnées. Il suffit de laisser la position du navigateur pour vous bien.

Bien sûr, une partie de la raison pour laquelle vous voudrez peut-être éviter de flotteurs, c'est que vous avez d'autres éléments sur la page qui flottent ainsi, et c'est là que le brouillage des mensonges. Le overflow:hidden sur le conteneur doit prévenir contre certains de ce qui se passe.

Répondu el 19 de Septembre, 2008 par Jonathan Arkell (4265 Points )

Positionner un élément HTML par rapport à son conteneur à l’aide de CSS

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Positionner un élément HTML par rapport à son conteneur à l’aide de CSS

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: