【CSS3】定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"><img src="img/草1.jpg"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="div9">
文字
<input type="text" name="">
<img src="img/鸟1.jpg">
<p id="p1">哈哈</p>
<div id="div10"></div>
</div>
<br><br><br><br><br><br><br>
<div id="div11"></div>
<div id="div12"></div>
<div id="div13"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>让窗口滚动起来</p>
</body>
</body>
</html>
#div1{
width: 100px;
height: 100px;
background: red;
/*position: relative;*//*相对定位对象会占据原来位置*/
position: absolute;/*绝对定位对象可以层叠。absolute相对与父元素body来定位*/
left: 100px;
}
#div2{
width: 100px;
height: 100px;
background: green;
/*position: relative;*//*相对定位和绝对定位都需要结合left、right、top、bottom使用*/
position: absolute;
right: 50px;
}
#div3{
width: 100px;
height: 100px;
background: blue;
/*position: relative;*/
position: absolute;
top: 50px;
}
#div4{
width: 100px;
height: 100px;
background: pink;
/*position: relative;*/
/*position: absolute;*/
/*position: fixed;*//*滚动窗口时fixed定位的内容不会被滚动，相对于窗口来定位。*/
/*position: static;*//*默认值，没有定位*/
/*bottom: 10px;*/
}
#div5{
width: 200px;
height:200px;
background: rgba(255,0,0,0.5);
position: relative;
left: 200px;
z-index:;
}
#div6{
width: 200px;
height:200px;
background: rgba(0,255,0,0.5);
position: relative;
left: 300px;
top: -100px;
z-index:;
}
#div7{
width: 200px;
height:200px;
background: rgba(0,0,255,0.5);
position: relative;
left: 400px;
top: -200px;
z-index:;/*1在最底层*/
}
#div8>img{
/*position: fixed;*/
clip: rect(10px,160px,160px,10px);/*只有在position为absolute或fixed时才会起作用，在position为relative或static时无效。*/
}
#div9{
width: 100%;
height: 500px;
background: rgba(100,100,100,0.3);
}
#p1{
display: inline-block;
vertical-align: 20px;
}
#div10{
width: 100px;
height: 100px;
background: pink;
display: inline-block;
vertical-align: text-top;/*可设text-bottom、sub、super*/
}
input{
vertical-align: top;/*可设baseline默认、top、middle、bottom、像素、百分比*/
}
#div11{
width: 200px;
height: 200px;
background: red;
float: left;
}
#div12{
width: 200px;
height: 200px;
background: green;
float: left;
}
#div13{
width: 200px;
height: 200px;
background: blue;
clear: left;/*清除浮动clear:both、left、right、none*/
}
【CSS3】定位的更多相关文章
- CSS3定位和浮动详解
本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下 一.定位 1. css定位: 改变元素在页面上的位置 2. css定位机制: 普通流: 浮动: 绝对布局: 3. cs ...
- CSS3 定位| Position研究
视区(视口) 当浏览者查看一份网页文件时,通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域).当我们调整视区大小时,UA 就有可能会改变 ...
- 6.css3定位--position
⑴Static默认值,没有定位. ⑵Absolute绝对定位.后面的元素会补上原来偏移的位置. ⑶Relative相对定位.后面的元素不会补上原来偏移的位置. ⑷Fixed绝对定位.相对于浏览器窗口固 ...
- [CSS3] 学习笔记-CSS定位
页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...
- 转：python webdriver API 之简单对象的定位
对象(元素)的定位和操作是自动化测试的核心部分,其中操作又是建立在定位的基础上的,因此元素定位就显得非常重要. (本书中用到的对象与元素同为一个事物)一个对象就像是一个人,他会有各种的特征(属性) , ...
- CSS选择器定位的使用
CSS 可以比较灵活选择控件的任意属性,一般情况下定位速度要比XPath 快,但对于初学者来说比较难以学习使用,下面我们就详细的介绍CSS 的语法与使用.一.CSS 选择器的常见语法: 例如下面一段代 ...
- 一起感受HTML5和CSS3
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和&l ...
- 自动化测试selenium----css选择器总结
选择器 示例 描述 * * 匹配任何元素 element DIV 标签选择器,匹配所有使用DIV标签的元素 .class .tips class选择器,匹配所有class属性中包含info的元素 ...
- Web 端自动化测试
一.环境搭建 准备工具如下:下载 python[python 开发环境](http://python.org/getit/) 下载setuptools: [python 的基础包工具](http:// ...
- CSS选择器语法&示例
CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) ...
随机推荐
- 创建简单的Python列表
比如给出电影列表: The Holy Grail The Life of Brian The Meaning of Life 转换为Python可读的列表,需要遵循以下4个步骤: 1.在数据两边加引号 ...
- Cubieboard2安装Fedora20
几天前入手一块Cubieboard2,又买了张16G的TF卡,装个linux折腾折腾.以前都是在虚拟机上用linux,个人比较喜欢Fedora,因为总能用上最新版的软件,像支持C++11的GCC.Cl ...
- 翻译连载 | 附录 A：Transducing（下）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- Maven创建父子工程(简单、完整)
Eclipse创建Maven父子工程(书中有的叫聚合工程,因为看了网上很多教程,实际操作总会有这样那样的小问题,有时候包结构还不对,创建成功后索性就自己写一篇帮助小白,有不对请指教) 1 file-n ...
- laravel 500错误的一个解决办法
我从svn上update下来了开发环境的目录,结果当我访问本地的根目录的时候却报了500错误,百度了许多,也看了很多博客,发现都没有解决我的问题,所以我觉得我的解决办法值得一写,当你从svn上upda ...
- Pyhton编程（五）之基本数据类型-列表、元组、字典
一:列表(list) 列表是由一系列按特定顺序排列的元素组成,可以创建包含字母表中的所有字母.数字.或中文的列表,也可以将任何东西加入列表中,其中的元素之间可以没有任何关系. 在Python中,用方括 ...
- JavaScript学习心得
javaScript十分的强大,所以自然而然学起来也是不易的,想要掌握它的核心,把它理解透更是不易的,但只要你能够静下心来,耐心的去钻研,学习,还是可以把它给学好的,加油吧! 下面是一些JavaScr ...
- c++的引用和c的指针之创建链表，二叉树的烦恼和区别
/* **代码功能:创建一个令人头疼的不算头疼的链表,然后把特定的数据删除. *这次的主题不是在代码上,主要是关于创建链表时候的传参问题,嘿嘿,不相信你没遇到过 */#include "st ...
- Tomcat中虚拟路径
默认情况下,Tomcat访问静态资源配置是这样的 <Context path="/project_name" docBase="d:\tomcat_statics& ...
- iOS 超大高清图展示策略 TileLayer 及 levelsOfDetailBias 分析
本次分析针对当下流行的中国地图图片处理,1亿像素,就是下面这张: 原图尺寸:11935x8554 文件大小:22.1MB 原始加载方式 首先,我们尝试一下直接加载的方式,看看效果会有多恐怖 效果请看下 ...