Disposition DIV à l'aide de l'attribut de position
Positionnement relatif et Positionnement absolu
Balise de positionnement : position
contient des attributs : relatif (relatif) absolu (absolu)
1.position:relative; Si un élément est positionné de manière relative, il apparaîtra d'abord à son emplacement. Déplacez ensuite l'élément "par rapport" à son point de départ d'origine en définissant une position verticale ou horizontale. (Encore un point, lorsqu'il est positionné de manière relative, l'élément occupe toujours l'espace d'origine, qu'il soit déplacé ou non. Par conséquent, déplacer l'élément le fera recouvrir d'autres cases)
2.position : absolue ; signifie positionnement absolu, La position sera calculée à partir du coin supérieur gauche du navigateur. Le positionnement absolu retire l'élément du flux de documents afin qu'il ne prenne pas de place. Les éléments du flux de documents normal sont disposés comme si les éléments positionnés de manière absolue n'étaient pas présents. (Comme les boîtes positionnées de manière absolue n'ont rien à voir avec le flux de documents, elles peuvent couvrir d'autres éléments de la page et leur ordre hiérarchique peut être contrôlé via z-index. Plus le z-index est élevé, plus il est visible. est. Dans la couche supérieure. )
3. Une fois que le conteneur parent utilise le positionnement relatif et que l'élément enfant utilise le positionnement absolu, la position de l'élément enfant n'est plus relative au coin supérieur gauche du navigateur, mais par rapport au coin supérieur gauche de la fenêtre parent
4. Le positionnement relatif et le positionnement absolu doivent être utilisés avec le haut, la droite, le bas et la gauche pour localiser la position spécifique. quatre attributs ne prennent effet qu'une fois l'élément positionné et ne sont pas valides dans les autres cas. De plus, ces quatre attributs ne peuvent utiliser que deux attributs adjacents en même temps. Vous ne pouvez pas utiliser haut et bas en même temps, ni utiliser gauche et droite en même temps.
Ce qui suit est la disposition relative absolue de plusieurs p dans un p :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>testp.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="this is my page"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
window.onload = function(){
document.getElementById("myp").style.height = "200px";
}; </script>
</head>
<body>
关键因素：外层加position:relative,里面的p使用position: absolute，<br />
但这种方法的问题有：外层的p必须指定具体的height，高度不能使用百分比 <!-- <p style="position:relative;width: 600px;height:500px;">
<p style="width: 100px;height: 50px; position: absolute;right:10px;bottom: 10px"></p>
</p> -->
<p id="myp" style="position:relative;width: 100%;height:auto;">
<p style="width: 100px;height: 50px; position: absolute;right:10px;bottom: 10px"></p>
<p style="width: 100px;height: 50px; position: absolute;left:10px;bottom: 10px"></p>
</p>
</body></html>Rendu :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Compétences d'application flexibles de l'attribut de poste en H5
Dec 27, 2023 pm 01:05 PM
Comment utiliser de manière flexible l'attribut position dans H5. Dans le développement H5, le positionnement et la disposition des éléments sont souvent impliqués. A ce moment, la propriété CSS position entrera en jeu. L'attribut position peut contrôler le positionnement des éléments sur la page, y compris le positionnement relatif (relatif), le positionnement absolu (absolu), le positionnement fixe (fixe) et le positionnement collant (collant). Cet article présentera en détail comment utiliser de manière flexible l'attribut position dans le développement H5.
Conseils d'optimisation des propriétés de mise en page CSS : position collante et flexbox
Oct 20, 2023 pm 03:15 PM
Conseils d'optimisation des attributs de mise en page CSS : positionsticky et flexbox Dans le développement Web, la mise en page est un aspect très important. Une bonne structure de mise en page peut améliorer l’expérience utilisateur et rendre la page plus belle et plus facile à naviguer. Les propriétés de mise en page CSS sont la clé pour atteindre cet objectif. Dans cet article, je présenterai deux techniques d'optimisation des propriétés de mise en page CSS couramment utilisées : positionsticky et flexbox, et je fournirai des exemples de code spécifiques. 1. Postes
Comment mettre div en bas en HTML
Mar 02, 2021 pm 05:44 PM
Comment placer un div en bas du HTML : 1. Utilisez l'attribut position pour positionner la balise div par rapport à la fenêtre du navigateur, avec la syntaxe "div{position:fixed;}" 2. Définissez la distance vers le bas sur ; 0 pour placer définitivement le div en bas de page, la syntaxe est "div{bottom:0;}".
Comment utiliser la position en h5
Dec 26, 2023 pm 01:39 PM
Dans H5, vous pouvez utiliser l'attribut position pour contrôler le positionnement des éléments via CSS : 1. Positionnement relatif, la syntaxe est "style="position: relative;"; 2. Positionnement absolu, la syntaxe est "style="position : Absolute;" "; 3. Positionnement fixe, la syntaxe est "style="position:fixed;" et ainsi de suite.
Quels sont les attributs du poste ?
Oct 10, 2023 am 11:18 AM
Les valeurs d'attribut de position incluent statique, relatif, absolu, fixe, collant, etc. Introduction détaillée : 1. static est la valeur par défaut de l'attribut position, ce qui signifie que les éléments sont disposés selon le flux normal du document sans positionnement particulier. La position des éléments est déterminée par leur ordre dans le document HTML et ne peut pas être définie. passé par le haut, la droite et le bas. Ajustez avec l'attribut gauche ; 2. relatif est le positionnement relatif et ainsi de suite.
Comment effacer la position en CSS
Oct 07, 2023 pm 12:02 PM
Comment effacer la position en CSS : 1. Utilisez l'attribut static, qui peut être défini sur static pour effacer l'attribut position ; 2. Utilisez l'attribut hériter pour effacer l'attribut position de l'élément et hériter de l'attribut position de l'élément parent ; 3. Utilisez l'attribut unset, restaurez les attributs à leurs valeurs par défaut et effacez l'attribut position de l'élément ; 4. Utilisez la règle !important, qui remplacera les autres règles de style et effacera l'attribut position, etc.
Interprétation des propriétés en cascade CSS : z-index et position
Oct 20, 2023 pm 07:19 PM
Interprétation des propriétés en cascade CSS : z-index et position En CSS, la conception de la mise en page et du style est très importante. En conception, il est souvent nécessaire de superposer et de positionner les éléments. Deux propriétés CSS importantes, z-index et position, peuvent nous aider à répondre à ces besoins. Cet article approfondira ces deux propriétés et fournira des exemples de code spécifiques. 1. Attribut z-index L'attribut z-index est utilisé pour définir l'ordre d'empilement des éléments dans le sens vertical. Empilement d'éléments
Comparaison de la disposition Div et de la disposition des tableaux en HTML
Sep 08, 2023 pm 02:13 PM
En HTML, la mise en page définit la structure de base et l'apparence d'un site Web. La mise en page HTML est un modèle qui nous montre comment les éléments HTML sont disposés dans une page Web. Il vous offre la possibilité de créer des pages Web à l'aide de simples balises HTML. Disposition DIV La mise en page Div est la mise en page la plus courante en HTML et est basée sur des éléments. Les éléments HTML sont utilisés pour définir des parties d'un document. Une balise est une balise conteneur, c'est-à-dire qu'elle possède une balise de début et une balise de fin. Nous pouvons définir plusieurs éléments dans un document HTML, et chaque élément peut être utilisé pour afficher un ensemble d'informations différent. À l'intérieur de l'élément, nous pouvons utiliser plusieurs éléments HTML, tels que paragpraph(), head(), span(), etc. Nous pouvons étiqueter tous les H
