今天来学习14、【视频】绝对定位和相对定位

只看该作者 · 发表于 2015-1-16 10:34:17

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

我们应当活用HTML为我们提供的标签。

[media=wmv,600,450][/media]
点击下载视频教程(感激动力软件园供应下载空间)
定位标签：position
包括属性：relative（绝对）
absolute（相对）
1.position:relative;假如对一个元素举行绝对定位，起首它将呈现在它地点的地位上。然后经由过程设置垂直或程度地位，让这个元素"相对"它的原始出发点举行挪动。（再一点，绝对定位时，不管是不是举行挪动，元素仍旧占有本来的空间。因而，挪动元素会招致它掩盖其他框）
2.position:absolute;暗示相对定位，地位将根据扫瞄器左上角入手下手盘算。相对定位使元素离开文档流，因而不占有空间。一般文档流中元素的结构就像相对定位的元素不存在时一样。（由于相对定位的框与文档流有关，以是它们能够掩盖页面上的其他元素并能够经由过程z-index来把持它层级序次。z-index的值越高，它显现的越在下层。）
3.父容器利用绝对定位，子元素利用相对定位后，如许子元素的地位不再相对扫瞄器左上角，而是相对父窗口左上角
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><style>body{padding:20px;}a{color:#00f;text-decoration:none;}a:hover{color:#f60;position:relative;top:1px;left:1px;}#layout{width:600px;margin:0auto;background:#eee;position:relative;}#new{position:absolute;top:-15px;left:140px;}</style></head><body><divid="layout"><divid="new"><imgsrc="http://www.zhuna.cn/images/new.gif"/></div>这里是内容<ahref="#">这里是链接</a>这里也是内容</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
以下的内容是一位网友的DIVCSS编码笔记，是值得大家学习的，在实际工作与开发中，将工作中的点滴记录下来，回首这些过往，你也会收获很多