Maison > interface Web > tutoriel HTML > le corps du texte

关于position定位_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 09:30:23
original
967 Les gens l'ont consulté


如上图的 大V

html结构


关于position定位_html/css_WEB-ITnose
V 



大V如何定位,父节点div已经使用了position:absolute,或者有更加简易的代码 


回复讨论(解决方案)

绝对定位是相对于定位父级的,所以,只要你确定了他相对的父级,那么就好处理

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style>.box{position:relative; border: solid 1px #ccc; height:300px; width:200px;margin:100px auto;}.sub{ position:absolute;top:-50px;}.sub img{width:200px;height:200px;}.sub span{ position:absolute;right:0;bottom:0; border-radius:20px 20px; border:solid 2px #FF0;color:#FF3; padding:0 5px;}</style></head><body><div class="box">    <div class="sub">    	<img  src="http://img0.bdstatic.com/img/image/mingxingliminhao.jpg"/ alt="关于position定位_html/css_WEB-ITnose" >    	<span>V</span> <!--大V如何定位在最下方,父节点div已经使用了position:absolute。。。-->    </div></div></body></html>
Copier après la connexion

这个和父节点有没有使用绝对定位有关系么?

这个和父节点有没有使用绝对定位有关系么?
有关系,无论父结点是相对定位还是绝对定位,子节点的绝对定位就会相对于该父节点,这样就能很方便实现LZ的要求。

楼主到底是要定位的大V 呢还是什么啊 。要定位大V 就给大V 加 absolute 啊

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal