communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > position中的困惑，帮忙解决一下_html/css_WEB-ITnose

position中的困惑，帮忙解决一下_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-21 08:49:00
original
1064 Les gens l'ont consulté

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<style>	*{		margin:0;		padding:0;	}	.parent{		background: red;		position: absolute;		left:60px;		width: 300px;		height: 300px;	}	.childRight{		background: blue;		width: 240px;		position: relative;		right:60px;	}	.child-Right{		background: yellow;		width: 240px;		position: relative;		right:-60px;	}	.childLeft{		background: blue;		width: 240px;		position: relative;		left:60px;	}	.child-Left{		background: yellow;		width: 240px;		position: relative;		left:-60px;	}	</style></head><body>	<div class="parent">parent		<div class="childRight">childRight</div>		<div class="child-Right">child-Right</div>		<div class-"childLeft">childLeft</div>		<div class="child-Left">child-Left</div>	</div>	<div style="width:300px;height:300px;border:1px solid #000">hello</div></body></html>
Copier après la connexion

大家帮忙看一下，父标签设置绝对定位，子标签都设置了相对定位，两个问题：1.为什么right：60px和left：-60px相同，第三个子标签（.childLeft）为什么不显示颜色了？


回复讨论(解决方案)

对，
相对定位情况下，是以元素自身原本的位置进行偏移，右边偏移正60px就等于左边偏移负60px。


为什么不显示颜色
 

childLeft
 

这么明显,等于号你打成减号了

Étiquettes associées：
position中的困惑，帮忙解决一下
source：php.cn
Article précédent：CSS基础教程之常用属性_html/css_WEB-ITnose Article suivant：跨屏测 Adaptest 移动适配 CSS v1.1 发布_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Quelle est la différence entre les balises HTML <a></a> et <a href=""></a> ? Certains sites Web utilisent l'[url]adresse du site Web[/url] dans leur zone de texte et n...
Depuis 2024-04-02 22:46:16
0
2
403
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal