第一种位置关系：position:fixed  锁定位置（相对于整个浏览器的位置），常用在各大网站的右下角或其它位置的小广告。

如果需要调整锁定位置，需要使用如下方式：<div style="width:300px; height:300px; position:fixed; top:0px; left:0px; right:0px; bottom:0px" ></div>

　　第二种位置关系：position:absolute 绝对位置（相对于父级元素--浏览器，绝对定位的上级）　

(1)最外边没有absolute，则调整时div相对于浏览器变化；（2）最外面有absolute，则调整时div相对于最外层边界变化。

如果需要调整绝对位置，需要使用如下方式：<div style="width:300px; height:300px; position:absolute; top:0px; left:0px; right:0px; bottom:0px" ></div>

　　第三种位置关系：position:relative 相对位置（相对于自身应该出现的位置）

如果需要调整相对位置，需要使用如下方式：<div style="width:300px; height:300px; position:relative; top:0px; left:0px; right:0px; bottom:0px" ></div>

CSS格式与布局中三种位置的理解与应用的更多相关文章

  1. 关于CSS格式与布局中的基础知识的简单操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

  3. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  4. 转-Web Service中三种发送接受协议SOAP、http get、http post

    原文链接:web服务中三种发送接受协议SOAP/HTTP GET/HTTP POST 一.web服务中三种发送接受协议SOAP/HTTP GET/HTTP POST 在web服务中,有三种可供选择的发 ...

  5. Android中三种超实用的滑屏方式汇总(转载)

    Android中三种超实用的滑屏方式汇总   现如今主流的Android应用中,都少不了左右滑动滚屏这项功能,(貌似现在好多人使用智能机都习惯性的有事没事的左右滑屏,也不知道在干什么...嘿嘿),由于 ...

  6. C#中三种定时器对象的比较

    ·关于C#中timer类 在C#里关于定时器类就有3个1.定义在System.Windows.Forms里2.定义在System.Threading.Timer类里3.定义在System.Timers ...

  7. C#中三种定时器对象的比较 【转】

    https://www.cnblogs.com/zxtceq/p/5667281.html C#中三种定时器对象的比较 ·关于C#中timer类 在C#里关于定时器类就有3个1.定义在System.W ...

  8. Spring中三种配置Bean的方式

    Spring中三种配置Bean的方式分别是: 基于XML的配置方式 基于注解的配置方式 基于Java类的配置方式 一.基于XML的配置 这个很简单,所以如何使用就略掉. 二.基于注解的配置 Sprin ...

  9. 深入浅出spring IOC中三种依赖注入方式

    深入浅出spring IOC中三种依赖注入方式 spring的核心思想是IOC和AOP,IOC-控制反转,是一个重要的面向对象编程的法则来消减计算机程序的耦合问题,控制反转一般分为两种类型,依赖注入和 ...

随机推荐

  1. Java基础----jdk1.8 反射实验

    (写在最前:还没入门的搬砖工的一本正经的胡说八道) 引言:  最近做到的项目中,需要给对接方提供一个公共接口,根据对方传入的XML文件的rootelement分发调用接口,最简单的使用if-else ...

  2. web前端CSS2学习2017.6.17

    CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题. 通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本 ...

  3. jquery.jqprint-0.3.js打印table表格遇到的坑

    在谷歌控制台输入window.print();可以调起当前整个页面的打印预览,那么要想打印页面某块区域内容怎么办呢? 我找到了jqprint插件,其原理是运用iframe 元素创建另外一个文档的内联框 ...

  4. Unity 游戏框架搭建 (六) 关于框架的一些好文和一些思考

      在进行项目架构阶段,游戏框架可以解决一部分问题.剩下的架构问题还需要根据不同的项目解决.总之游戏框架是游戏架构的一部分. 关于锤子和钉子:   最近又拿起了<代码大全>和<暗时间 ...

  5. vijos1037题解

    题目: 2001年9月11日,一场突发的灾难将纽约世界贸易中心大厦夷为平地,Mr. F曾亲眼目睹了这次灾难.为了纪念"9?11"事件,Mr.F决定自己用水晶来搭建一座双塔. Mr. ...

  6. iconfont字体图标的使用方法--超简单!

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  7. js实现单张图片（或者多张）的预览功能

      这个是预览单张图片的,如果要预览多张图片,改下面红色标记的地方就好了 <html> <head> <meta http-equiv="Content-Typ ...

  8. 安装wdcp linux一键安装包云系统客户端教程

    首先把自己阿里云的磁盘格式化然后重启 自己下载一个PuTTY 打开后输入自己的Ip地址端口号默认是22 会跳出一个yes 跟no界面,点击yes 会进入一个类似cmd界面 直接输入root,然后会提示 ...

  9. 常用PHP函数

    md5_file() 生成md5 $zip = new \ZipArchive(); if($zip->open($savepath.$key) === TRUE){ $zip ->ext ...

  10. SQL Server事务遭遇网络异常时的处理机制浅析

    SQL Server数据库中,如果应用程序正在执行一个事务的时候突然遭遇了网络异常,例如网络掉包,网络中断等,那么这个事务会怎么样? SQL Server数据库是通过什么机制来判断处理呢? 估计很多人 ...