关于css定位
关于定位要弄清一个概念,那就是"文档流"
什到是文档流 说得简单一点 就是 自上而下 从左到右
生成顺序
关于html元素又分为两种 块状元素 内联元素
块状元素：单独占一行
内联元素: 撑完了在到下一行
有时候我们需要 相同的div在一行 所以就用到float
但是有时候需要把某个元素 放在特定的元素的位置
但又不影响页面结构 那么我们的定位功能就出现(脱离文档流，就好像悬浮于它上面)
不多说了上个例子
<!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>Untitled Page</title>
<style type="text/css">
#test{
border:1px solid #ccc;
width:500px;
height:2000px;
} #test_1{
border:1px solid #ccc;
width:300px;
height:300px;
z-index:1000000;
position:relative; } #test_1_1{
border:1px solid #ccc;
width:100px;
height:100px;
cursor: pointer;
position:fixed;
left: 100px;
top:300px;
z-index:99998;
}
/*
absolute:绝对定位 如果父元素没有定位元素则按body偏移
如果有则按定位元素来偏移(会脱离文档流) relative是相对于自己本身来定位的 他是参照父级的原始点为原始点，无父级则以body的原始点为原始点
relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了，
如果被定义成relative的对象被移出了 他原来的位置还在，别的元素就不能替代这个位(不会脱离文档流) fixed:固定定位相对视窗(脱离文档流) */ </style>
</head>
<body>
<div id="test">
<div id="test_1">
<div id="test_1_1">
sgsgsgs
</div>
</div>
</div>
</body>
</html>
关于w3c总结说明图
关于css定位的更多相关文章
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
- 常用的CSS定位，XPath定位和JPath定位
CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- CSS 定位
一.CSS 定位和浮动 它们代替了多年来的表格布局. 定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置. 浮动在 CSS1 中被首次提出.浮动不完全是定位, ...
- Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景 在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
- CSS定位小技巧
CSS定位Static 默认定位Relative 相对定位:left 和topposition: relative;/*相对定位*/ left:40px;/*在原来的位置向右移动*/ top:100p ...
- (七)CSS定位(Positioning)
CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...
- CSS定位（CSS定位概述、相对定位、绝对定位、浮动）
CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...
- CSS定位（postion）和移动(float)
5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
随机推荐
- Subversion代码提交中的org.apache.subversion.javahl.ClientException: svn: E200007: Commit failed异常解决
: 在切换subversion服务器地址之后,发生的无法正确提交代码的问题org.apache.subversion.javahl.ClientException: svn: E200007: Com ...
- 精通Docker的50个必备教程、工具、资源
Docker 已经震惊了软件开发界.它提供了一种根据 DevOps 方法打包和输送应用程序的便捷方法. 最近我们发布了 51 个必备的 Docker 工具列表①,但工具不是完全精通容器化所需的唯一东西 ...
- [Windows Azure] Getting Started with Windows Azure SQL Data Sync
Getting Started with Windows Azure SQL Data Sync In this tutorial, you learn the fundamentals of Win ...
- 使用nginx搭建tomcat集群配置
软件准备: (1)jdk-8u73-linux-x64.tar.gz (2)apache-tomcat-7.0.57.tar.gz (3)nginx-1.7.7.tar.gz 准备3台Linux机器, ...
- qs文档翻译
安装: npm install qs --save-dev 基本用法: let qs = require('qs'); let assert = require('assert'); //qs.par ...
- hive入门
hive 当前用到的就这些,以后用到的再补充. 参考自官方文档 大小写不敏感 创建/删除数据库 CREATE/DROP DATABASE|SCHEMA [IF NOT EXISTS] <data ...
- netty的线程池-----揭示了使用两个线程池的原因
线程模型是Netty的核心设计,设计地很巧妙,之前项目中有一块处理并发的设计和Netty的Eventloop单线程设计类似,效果得到了实证. Netty5的类层次结构和之前的版本变化很大,网上也有很多 ...
- maven 打包时提示 软件包 xxxxxxx 不存在
右键项目->MAVEN->Update Project Configuration然后clean相关项目再打包如果还不行 在你关联包的路径下 把所有文件删掉 在打包的时候会重新下载 ...
- java基础篇---正则表达式
正则表达式在许多语言,例如Perl.PHP.Python.JavaScript和JScript,都支持用正则表达式处理文本,一些文本编辑器用正则表达式实现高级“搜索-替换”功能. 正则表达式是一种可以 ...
- Android 仿微信的朋友圈发布(1)
想自己做一个APP,然后等做到类似发布朋友圈的,微博状态的时候,遇到问题了,完全不知道咋下手. 什么访问相册,列出照片,选择照片进行回传,完全不懂,咋办,自己写?自己写是不可能自己写的,打屎都不可能自 ...