HTML5学习_day06(2)--html之相对定位

相对定位就是相对于自己原来的位置只是内容偏移了而已

并且原有占用的空间依旧存在不会被其他元素填充

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>相对定位</title><style type="text/css">#div{width: 1000px;border: 3px solid red;}#div div{width: 200px;height: 200px;border: 4px solid;display: inline-block;}/*#div .div1{position: relative;left: 230px;           right:100px;  优先级 left>right  top>bottomtop:100px;bottom: 100px;  margin-left:50px;}*//*问题一#div .div1{position: relative; top:50px;margin-top: 100px;  这样设置会整体下移  要重新设置对齐方式 vertical-align: top;}*/</style></head><body><!--1.什么是相对定位(参考点永远是自身的左上角)也就是相对于自己在文档流中的位置进行定位。2.相对定位的几个特性1.不脱离文档流，原有位置空间被保留2.不影响元素本身属性的设置4.如果给元素设置了相对定位胆不设置偏移量，元素本身就不受任何影响的。--><div id="div"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><div class="div4">div4</div></div><!--注意：1.如果一个定位元素，同时设置了top和bottom，top的优先级更高，会显示top设置的值。2.一个定位元素，如果同时设置了left和right,那么优先级取决于网站语言，在英语网页中left优先级更高，在阿拉伯语言的网页中right优先级更高3.如果一个元素设置了定位(甚至是偏设置了移)，其他元素在排版的参考的依然是那个元素的原有位置(没有设置偏移的位置)4.如果一个元素设置了相对定位，原有位置空间被保留，即使该元素做偏移，其他元素也不会占据他原有(偏移前)的位置。-->z-index:默认是0;</body>
</html>

HTML5学习_day06(2)--html之相对定位相关推荐

HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
html和html5学习
html和html5学习 chorme.safari中的input或textarea 替换元素和非替换元素 html超链接(a)详细讲解 html5新增及删除标签 html表格图片加a ...
HTML5学习笔记（一）：HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
html5该怎么样学习？零基础入门HTML5学习路线
纵观近几年HTML5的发展可以看出,HTML5开发持续上涨,腾讯.微软.谷歌等国际互联网企业都将HTML5的研发与使用放在了重要的地位.目前全球有超过十亿台手机浏览器支持HTML5,而微信小程序的开放 ...
Html5学习笔记1 元素标签属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
HTML5 学习笔记
HTML5 学习笔记前言该学习笔记的相关学习视频:[狂神说Java]HTML5完整教学通俗易懂目前笔记只有简单的例子和框架,将来在实践中会进一步学习和补充内容目录 HTML5 学习笔记前言 ...
html5 制作会转的风扇,HTML5学习第5天[乱撞的球]可以听到风扇声的哟
HTML5学习第5天[乱撞的球] body{ font-family: 微软雅黑; } body,h1{ margin:0; } canvas{ display:block;margin-left: ...
html5 学习_5分钟内学习HTML
html5 学习 by Eric Tirado 埃里克·蒂拉多(Eric Tirado) 5分钟内学习HTML (Learn HTML in 5 minutes) 快速教程可帮助您开始构建网站. (A ...
HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
html5学习开发指南
本文发表于CSDN<程序员>杂志2016年8月期,未经允许不得转载! 概述: 随着移动互联网的兴起,前端开发工程师的岗位也随着兴起.前端工程师不仅在用户和产品之间扮演着越来越重要的角色,而 ...

HTML5学习_day06(2)--html之相对定位

HTML5学习_day06(2)--html之相对定位相关推荐

最新文章

热门文章