试验了下宽度百分比和最近的定位祖先元素没关系啊!?

试验了下宽度百分比和最近的定位祖先元素没关系啊!?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">


.div1{ width: 200px;

height: 500px;

background: blue;

position: relative;

}

.div2{

width: 50%;

height: 50%;

background: red;

position: absolute;

top: 10px;


}

</style>

</head>

<body>

<div class="par">

<div class="div1"></div>

<div class="div2"></div>

</div>

</body>

</html>

http://img1.sycdn.imooc.com//climg/5a02cfdd0001251314900816.jpg

http://img1.sycdn.imooc.com//climg/5a02d0080001b5d415101200.jpg

.div1设置了relative,是个定位祖先元素。按课程所说div2的宽高设置50%的话应该是div1的一半啊。可是试验了下发现,div2的宽高却是body的50%。为何???

正在回答

登陆购买课程后可参与讨论,去登陆

5回答

首先,类名为div1的div元素跟类名为div2的div元素是兄弟关系;其次,div2的宽高设置的50%是相对于父元素(也就是类名为par的div元素),而类名为par的div元素无设置宽高,所以它又继承了它的父元素(也就是body的宽高),所以div2的高宽显示出来的就是body的50%,希望对你有帮助

  • 慕圣1028146 提问者 #1
    注意我的截图,课程里是那么写的“最近定位祖先元素”,并没有强调是父级元素
    2017-11-08 18:07:48
  • 慕圣1028146 提问者 #2
    非常感谢!
    2017-11-09 15:22:30
提问者 慕圣1028146 2017-11-09 15:22:57

是我理解错误

一路电光带火花 2017-11-08 18:28:02

祖先元素就是它外层的元素啊,父级也算做祖先元素啊,没有异议啊~

前端射鸡师 2017-11-08 18:18:48

祖先元素可以是父元素,也可以是父元素的父元素,更可以是父元素的父元素的父元素,可以不停的父;

重点:离它最近那个;


提问者 慕圣1028146 2017-11-08 18:04:26

实验了几次,才发现,是把父级元素设置为定位祖先元素,才可实现定位的效果,包括宽高百分比等的设置。

课程里这么写“最近定位祖先元素”是否有一定的误导性? 导致概念模糊

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师