                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

有关定位的问题哪个大神给指导下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>混合布局编程挑战</title>

body{

margin:0;padding:0;background:#000;font-size:20px;

}

.top{

width:100%;height:100px;background:#ccc;

}

.main{

width:100%;height:500px;background:red;

}

.right{

height:500px;background:green;position:absolute;right:0px;left:210px;

}

.left{

width:200px;height:500px;background:blue;

float:left;

}

.foot{

width:100%;height:100px;background:orange;

}

</style>

</head>

<body>

<div class="right">right</div>

</div>

</body>

</html>

这里只给right设置了绝对定位，它上面的父元素都没有设置定位，它理应来说应该是相对于body绝对定位，但执行的结果是相对于父元素main绝对定位的，这个怎么解释

慕粉1840084516

2017-03-02

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

663

操作

收起

3 回答

qq_天天_66
2017-06-14

其实你的理解没有错，之所以你有这样的误解，你可以试一下将main的margin-left：10px时，你会发现left向右移动了10px，而right却没有移动，left和right紧贴在了一起。你就说明了他的定位确实是相对了body来的。

0 回复有任何疑惑可以回复我~

收起回答

慕粉1840084516 提问者
2017-03-02

但是我试过了，如果定义一个块级父元素box1和一个块级子元素box2，给子元素box2绝对定位，执行结果是子元素相对body的绝对定位，不是相对于box1的绝对定位，实例如下：

<!DOCTYPE html>

<html>

<head>

#box1{

width:300px;

height:300px;

background:red;

margin:10px 0px;

}

#box2{

width:100px;

height:100px;

background:blue;

position:absolute;

top:0px;

left:100px;

}

</style>

</head>

<body>

<div id="box1">box1

<div id="box2">box2

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

一颗心的星空
2017-03-02

CSS定位有三种基本定位：普通流、浮动、绝对定位。默认的是普通流定位，所以main没设置定位就默认是普通流定位，是有定位的。所以right的绝对定位就是关于父元素main定位。body算是right的爷爷元素了哈哈。应该没讲错吧。建议想了解比较详细的知识去w3school查，然后编程练习来慕课网这边，我是这样学的，我蛮说你蛮看，哈哈

0 回复有任何疑惑可以回复我~

收起回答