html – 如何绝对位置：在父元素的父元素之前相对于父元素？

概述这是 fiddle. 我有两个div元素. <div class="parent"> <div class="child"> </div></div> 和CSS代码. .parent { height: 20px; width: 100px; background-color: #080; position: relative;}.child { positio 这是 fiddle.

我有两个div元素.

<div >  <div >  </div></div>

和CSS代码.

.parent {  height: 20px;  wIDth: 100px;  background-color: #080;  position: relative;}.child {  position: absolute;  wIDth: 80px;  height: 200px;  background-color: #008;  right: -10px;  top: 30px;}.child:before {  border-right: 10px solID transparent;  border-bottom: 10px solID #008;  border-left: 10px solID transparent;  top: -10px;  wIDth: 0;  height: 0;  content: "";  position: absolute;  left: 50%;}

如何定位.child：在没有Js的情况下与.parent相关之前.我知道解决方案与.parent：之前,但它对我不好.

解决方法 我想这就是你想要做的.

我想你会发现它更强大和可扩展.

.parent {  height: 20px;  wIDth: 100px;  background-color: #080;  position: relative;}.child {  position: absolute;  wIDth: 80px;  height: 200px;  background-color: #008;  left: 50%;  /* note 50% */  top: 30px;  margin-left: -20px;  /* 2x your arrow size */}.child:before {  position: absolute;  border-right: 10px solID transparent;  border-bottom: 10px solID #008;  border-left: 10px solID transparent;  top: -10px;  /* your border size */  margin-left: 10px;  /* your border-size */  wIDth: 0;  height: 0;  content: "";  left: 0;}

<div >  <div >  </div></div>

总结

以上是内存溢出为你收集整理的html – 如何绝对位置：在父元素的父元素之前相对于父元素？全部内容，希望文章能够帮你解决html – 如何绝对位置：在父元素的父元素之前相对于父元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。