关于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 ...
随机推荐
- CSS加DIV布局
第一种: <div> <div class="right"> <p></p> <p></p> <p&g ...
- 《Java Concurrency》读书笔记，Java并发编程实践基础
1. 基本概念 程序,是一组有序的静态指令,是一种静态的概念.程序的封闭性是指程序一旦运行,其结果就只取决于程序本身:程序的再现性是指当机器在同一数据集上重复执行同一程序时,机器内部的动作系列完全相同 ...
- android 圆角编写(懒得去找，写给自己看的)
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="r ...
- 【Unity】2.9 光源（Lights）
分类:Unity.C#.VS2015 创建日期:2016-03-31 一.简介 光源 (Lights) 是每个场景的重要组成部分.网格和纹理决定了场景的形状和外观,而光源则决定了三维环境的颜色和氛围. ...
- HTML5学习笔记（二十四）：DOM扩展
DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...
- redis中键空间通知
通过redis的键空间通知,当redis删除过期key的时候,及时更新mongodb数据库中user的状态 var Redis = require('ioredis'); var redis = ne ...
- android笔记--加载框
package com.fuda.ui; import android.app.Activity; import android.os.Bundle; import android.os.Handle ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- [Windows Azure] Create a Virtual Network for Site-to-Site Cross-Premises Connectivity
Create a Virtual Network for Site-to-Site Cross-Premises Connectivity This tutorial walks you throug ...
- (原创)发布一个c++11开发的轻量级的并行Task库TaskCpp
TaskCpp简介 TaskCpp是c++11开发的一个跨平台的并行task库,它的设计思路来源于微软的并行计算库ppl和intel的并行计算库tbb,关于ppl和tbb我在前面有介绍.既然已经有了这 ...