尝试写个简单的banner,将div设成了relative,然后想让里面的h1置于div的底部。
为什么只把h1设为absolute就自动跑到底部了?
#banner h1{ position:absolute; }
2.我给h1设置了top:0,h1也会置于底部;但是我要是设置bottom:0,反而跑到了顶部?为什么?
3.给h1设置top:100或者设置left:100都没有效果,为什么?
完整css代码
#banner{ background:url(images/topbg.gif); height:60px; position:relative; vertical-align:central; } #banner #ad{ position:absolute; top:0; right:0; } #banner h1{ position:absolute; top:100; left:100; }
谢谢~
html代码
<body>
<div id="banner">
<h1>Travel Guide</h1>
<img id="ad" src="images/ad.gif" alt="ad">
</div>
1、首先设置要了解网页页面布局框架结构,设定宽高和边框,以及设置好class或者ID名称。
2、打开Dreamweaver CS5,点击新建HTML。
3、根据设定的网页布局,设置div网页结构。
4、添加div标签的class名称,这里也可以使用ID类名。
5、 编辑CSS控制div块的宽高和背景。
6、 这样就可以让子元素置于底部。
已加 求帮忙看看 就是一个div 里面一个h1 和一张广告图片 但是广告我不纠结 我纠结的是h1位置 谢啦~
追答#banner h1{
position:absolute;
top:100;
left:100;
}
我想跟你说的是,请问你的单位呢?
。。。哦哦 单位单位 好~
1和2求解~
对于你的
“为什么只把h1设为absolute就自动跑到底部了?
#banner h1{
position:absolute;
}
”我想说的是,你这样写的时候没有自动跑到底部,默认为top:0;left:0;并没有被背景图压住,不信你可以自己试试。
“我给h1设置了top:0,h1也会置于底部;”这个问题同上,不再解释,
“要是设置bottom:0,反而跑到了顶部?为什么?”这里h1只要绝对定位了不管是top值还是bottom值都会在div的上面,不会再div的下面。top是针对div最上面来说的距离,而bottom则是针对div最下面那一线来说的相对于底部的距离。画个图给你看或许更好理解:
所以一般定位只有两个值要么上下一个,左右一个
另外,若是你要定位在背景图之外,可以给bottom负值或者给top值大于div高度的值
你这样写的时候没有自动跑到底部,默认为top:0;left:0;并没有被背景图压住,不信你可以自己试试
什么叫没有被背景图压住?h1本来就是在背景图上层的啊 这个我没有问题的 我是想问 为什么没有处于背景的底部
后面的话 基本上看不懂。。。 我没有讨论层 就是z轴
你是想让h1里面的内容显示还是不想让h1里面的内容显示?