reletive布局问题实现 左青龙 右白虎

overmind 2010-09-10 04:13:19
我想实现的是中间是黄色
左青龙 右白虎 南朱雀 北玄武。。。
请告诉我远离 这个left top是谁相对于谁的 那个点?谢谢!!

<!DOCTYPE html>

<html>

<head>

<title>untitled</title>
<style>
*{
margin:0px;
padding:0px;
}
#center{
width:100px;
height:100px;
margin:300px;
background:Yellow;
}
#east{
background:Cyan;
position:relative;
left:-100px;
width:100px;
height:100px;
}
#west{
background:White;
position:relative;
right:100px;
width:100px;
height:100px;
}
#south{
background:DarkRed;
position:relative;
bottom:100px;
width:100px;
height:100px;
}
#north{
background:Black;
position:relative;
top:-100px;
width:100px;
height:100px;
}
body{
background:gray;
}
</style>
</head>

<body>
<div id="center">
<div id="east">青龙</div>
<div id="west">白虎</div>
<div id="south">朱雀</div>
<div id="north">玄武</div>
</div>

</body>

</html>
...全文
106 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
willerce 2010-09-10
  • 打赏
  • 举报
回复
也可以这样理解。
你先把各个块的top,left全部去掉。
你会看到四个块竖直排列下来。

然后,以目前各个块的位置进行计算!

也就说:加上top,left后的位置,是相对于本身没加top,left时的位置!
willerce 2010-09-10
  • 打赏
  • 举报
回复

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

<title>untitled</title>
<style>
*{
margin:0px;
padding:0px;
}
#center{
width:300px;
height:300px;
background:Yellow;
}
#east{
background:Cyan;
position:relative;
top:-100px;
left:200px;
width:100px;
height:100px;
}
#west{
background:White;
position:relative;
top:100;
left:0;
width:100px;
height:100px;
}
#south{
background:DarkRed;
position:relative;
top:-100px;
left:100px;
width:100px;
height:100px;
}
#north{
background:#ccc;
position:relative;
width:100px;
left:100px;
height:100px;
}
body{
background:gray;
}
</style>
</head>

<body>
<div id="center">
<div id="north">朱雀</div>
<div id="west">青龙</div>
<div id="east">白虎</div>
<div id="south">玄武</div>
</div>

</body>

</html>


应该是这样的。
relative受它的同级前后层的影响。如.north .east .south .west在html中的顺序改变一下,你会看到他们都相对影响的。

这种情况,一般用absolute更好解决一样。或者就直接用浮动咯!
yingying901029 2010-09-10
  • 打赏
  • 举报
回复
你弄跑题了,人让用定位,不是浮动!


[Quote=引用 5 楼 yufei278971394 的回复:]
HTML code
<html>

<head>

<title>untitled</title>
<style>
*{
margin:0px;
padding:0px;
}
#center{
width:300px;
……
[/Quote]
yufei278971394 2010-09-10
  • 打赏
  • 举报
回复
<html>

<head>

<title>untitled</title>
<style>
*{
margin:0px;
padding:0px;
}
#center{
width:300px;
height:100px;
margin:300px;
}
#east{
background:Cyan;
width:100px;
height:100px;
float:left;
}
#west{
background:White;
float:left;
width:100px;
height:100px;
}
#south{
clear:both;
background:DarkRed;
position:relative;
width:100px;
float:left;
height:100px;
left:100px;
}
#north{
background:Black;
color:#fff;
margin-left:100px;
width:100px;
height:100px;
}

body{
background:gray;
}

#c{
width:100px;
height:100px;
float:left;
background:Yellow;
}
</style>
</head>

<body>
<div id="center">
<div id="north">玄武</div>
<div id="east">青龙</div>
<div id="c">中间</div>
<div id="west">白虎</div>
<div id="south">朱雀</div>
</div>

</body>

</html>
ddcatlee 2010-09-10
  • 打赏
  • 举报
回复
相对定位 是相对于他自己原来静态时候的位置
yingying901029 2010-09-10
  • 打赏
  • 举报
回复
是根据east、west、south、north本身来算的,并不是根据哪一个点!
这四块布局默认是竖着排列的,他是根据竖着排列的地方动的!
yingying901029 2010-09-10
  • 打赏
  • 举报
回复
#north{
background:Black;
position:relative;
bottom:400px;
width:100px;
height:100px;
}
yingying901029 2010-09-10
  • 打赏
  • 举报
回复
#west{
background:White;
position:relative;
left:100px;
top:-100px;
width:100px;
height:100px;
}

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧