如何让图1中的div2移动到如图2上的位置;

思路:哪些css命令能够影响盒子显示的位置呢?

relative相对定位/定位偏移量

position:relative;  相对定位
        a、不影响元素本身的特性;
b、不使元素脱离文档流;
c、如果没有定位偏移量,对元素本身没有任何影响;

定位元素位置控制
        top/right/bottom/left  定位元素偏移量。
absolute绝对定位/定位层级

osition:absolute;  绝对定位
a、使元素完全脱离文档流;
b、使内嵌支持宽高;
c、块属性标签内容撑开宽度;
d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于整个文档发生偏移;
e、相对定位一般都是配合绝对定位元素使用;

z-index:[number];  定位层级
        a、定位元素默认后者层级高于前者;

 

待解决:脱离文本流貌似  margin0 auto失效  原因是什么  闭合浮动等等问题

遮罩滤镜/固定定位

遮罩弹窗(优酷弹窗)
标准 不透明度:  opacity:0~1;
IE 滤镜:           filter:alpha(opacity=0~100);

position:fixed; 固定定位
    与绝对定位的特性基本一致,的差别是始终相对整个文档进行定位;
    问题:IE6不支持固定定位;

定位其他值:
    position:static ; 默认值
    position:inherit ;  从父元素继承定位属性的值

position:relative | absolute | fixed | static | inherit;

定位的兼容问题、清浮动方法

 

position:relative;
    在 IE6 下父级的 overflow:hidden; 包不住子级的relative;

position:absolute;
    在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法;

position:fixed;  固定定位元素子级的浮动可以不用写清浮动方法;(IE6不兼容)

html+css学习笔记 4[定位]的更多相关文章

  1. CSS学习笔记之定位

    position 有4中不同类型的定位,分别为static.relative.absolute.fixed 1.static 元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创 ...

  2. CSS学习笔记:定位属性position

    目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...

  3. CSS学习笔记10 相对定位,绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  4. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  5. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. CSS学习笔记之样式声明

    目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...

  7. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  8. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

随机推荐

  1. HTML5 Web SQL Database 数据库的使用方法【图文说明】

    页面代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. 跳出if判断

    //out是随便起的,也可为haha out:if(1<2){           System.out.println("进入第一步 1<2"); if(2<3 ...

  3. Toad for Oracle 快捷键

    F4 看表的结构 F5 执行对话框中的SQL,注意最后需要以;结尾 F7 清除当前编辑框中所有的sql F8 查看历史的sql语句 F9 执行当前行的sql F10 看菜单 Ctrl + F12 保存 ...

  4. 配置PostgreSQL Streaming Replication集群

    运行环境: Primary: 192.168.0.11 Standby: 192.168.0.21, 192.168.0.22 OS: CentOS 6.2 PostgreSQL: 9.1.2 版本以 ...

  5. IC卡的逻辑卡号和市民卡卡号

    CPU卡,IC卡等的卡号与卡在出厂时的卡号.

  6. 不用Unity库,利用.NET动态代理自己实现AOP

    AOP意为面向切面的程序设计,主要表现为对不同的代码逻辑进行隔离,从而降低不同业务逻辑之间的耦合性,AOP又理解为“横切”,可以在不改变原有实现的情况下,对代码进行拦截和扩展,如果原有设计像一个瓶子, ...

  7. 关于MD5加密的小知识

    - (NSString *)MD5Hash { const char *cStr = [self UTF8String]; unsigned char result[16]; CC_MD5(cStr, ...

  8. 【转】使用Memcached提高.NET应用程序的性能

    在应用程序运行的过程中总会有一些经常需要访问并且变化不频繁的数据,如果每次获取这些数据都需要从数据库或者外部文件系统中去读取,性能肯定会受到影响,所以通常的做法就是将这部分数据缓存起来,只要数据没有发 ...

  9. Spring配置文件web.xml关于拦截

    1.<!-- 加载springMVC --><servlet><servlet-name>dispater</servlet-name><serv ...

  10. Linux 网络工具之fping

    系统中有个最最常用命令工具--ping,而fping 是ping 工具的加强版本.安装过程很简单: [root@mail /]# wget --limit-rate 500k http://www.f ...