css中position的定位以及图片文字位置

来源：互联网发布：什么是优化推广编辑：程序博客网时间：2024/05/17 20:32

position有四个属性分别是static, relative, absolute, fixed。其中最简单莫属于static了，着是其默认属性。没什么特殊效果，不做赘述。

然后便是relative，着个属性的作用是将节点根据自身的原位置移动，可以跟left right top和bottom。。。absolute则是根据其上面的relative或者absolute来进行定位，同样可以跟left right top和bottom，根据他们定位的方式不同relative又被称为相对定位，当然absolute就是绝对定位了。。而fixed是比较特殊的absolute，他是根据整个页面来定位，不会受到滚动的影响。。

随文附带练习代码，前面还有个图片与文字的关系。。

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>positiond的运用</title><meta name="keywords" content=""/><meta name="description" content=""/><meta name="viewport" content="width=device-width"/><link rel="stylesheet" href="css/style.css"/><link rel="shortcut icon" href="img/favicon.ico"/><link rel="apple-touch-icon" href="img/touchicon.png"/></head><style> .divcss5{ position:relative;width:400px;height:200px; border:1px solid #000} .img{width:100px;height: 100px;float: left;}.divcss5-b{ position:absolute;width:50px;height:50px; right:15px;bottom:13px;background:#00F} .divcss5-a-NR{width: 100px;height:100px;overflow: auto;}.div{width:300px;height: 200px}</style> <body><div class="g-doc">    <div class="g-hd">              </div>    <div class="g-bd">        <div class="g-mn">                      </div>        <div class="g-sd">                      </div>    </div>    <div class="g-ft">              </div></div><div class="divcss5"> <div class="div">    <img  class="img" src="http://static.googleadsserving.cn/pagead/imgad?id=CICAgIDQx9WoWxDYBRhaMgg9qaf04dqINg"/>    <div class="divcss5-a-NR">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>    </div>    <div class="divcss5-b">2</div>     </div></body></html>