css 如何用bottom来定位

html-css024

css 如何用bottom来定位,第1张

语法: bottom : auto | length

取值: auto :  默认值。

无特殊定位,根据HTML定位规则在文档流中分配

length :  由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。

说明:检索或设置对象与其最近一个具有定位设置的父对象底边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则,此属性设置会被忽略。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 bottom 。其值为一字符串,所以不可用于脚本(scripts)中的计算。请使用 style 对象的 posBottom , pixelBottom 等运行时特性。

示例: div { position: absolutebottom: 1in} div { position:relativebottom:6px}

不要使用绝对定位,这种功能局限性很强,绝对定位就是说不管什么情况,被定位的块都会在页面的一个地方显示,但是要让某块始终位于最下方,LZ已经考虑了它相对与其他块的位置,所以我建议LZ使用相对位置,这是HTML编写的习惯问题,也是页面设计的第一步,要把所要安排的层按照从上到下从左到右的顺序来写,当你写完所有的层以后,剩下的层自然就在最下面了,然后就可以设置相对位置和每个层的大小等具体属性了,如有不懂可以再问。

<!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></title>

<style type="text/css">

<!--

img{border:1px #ccc solid}

a{color:red}

a:hover img{position:relativebottom:10px}

-->

</style>

<body>

<a href="#">文字</a>

<a href="#">文字</a>

<a href="#">文字</a>

<br /><br /><br />

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<br /><br /><br />

<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>

<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>

<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>

</body>

</html>

只改这个hover就可以啊..10px也太大了点.

a:hover img{position:relativetop:1pxleft:1px}