CSS定义元素的位置
html元素的position属性，有4个属性值，分别是static、relative、fixed、absolute

static:
1、默认值，一般不显式设置为static
2、即使设置top、bottom、left、right，元素的位置不会发生改变
3、会随着页面滚动条移动
4、代码示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>position static</title>

     <style>

         .static{

             border: 2px solid red;

             /*position: static;  不管有没有这行代码，浏览器中看到的效果都一样，因为默认情况下，元素的position值就是static*/

             width: 100px;

             height: 100px;

         }

         .wh{

             width: 100%;

             height: 800px;

             background-color: grey;

         }

     </style>

 </head>

 <body>

     <h1>position static</h1>

     <div class="static">

         div元素的position：static

     </div>

     <div class="wh"></div>

 </body>

 </html>

relative:
1、元素相对于它原来的位置进行移动，移动的参考物就是浏览器默认给元素渲染出的那个位置
2、需要设置top、bottom、left、right，元素的位置才会移动
3、不设置top、bottom、left、right，则元素的位置不会移动。
4、left的值可正可负，为正，则元素位置往右边移动，为负，则往左边移动。right、top、bottom也一样，可正可负
5、元素移动后，原来的位置还存在文档流中，不会被其他元素填充上去。
6、会随着页面滚动条移动
7、代码示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>position relative</title>

     <style>

         .relative{

             border: 2px solid red;

             width: 300px;

             height: 200px;

             /*如果只设置position属性，而不设置top、bottom、left、right,则元素位置不会发生改变*/

             position: relative;

             top:15px;

             left:100px;

         }

         .wh{

             width: 100%;

             height: 800px;

             background-color: grey;

         }

         p{

             border: solid 1px blue;

         }

     </style>

 </head>

 <body>

     <h1>relative</h1>

     <div class="relative">

         div element position:relative

     </div>

     <p>div位置移动后，p元素不会填充div元素移动前的那个位置</p>

     <div class="wh"></div>

 </body>

 </html>

fixed:
1、需要设置top、bottom、left、right，才会相对于它原来的位置进行移动，这点跟relative一样。
2、不设置top、bottom、left、right，则元素的位置不会移动。
3、元素在相对自己原来的位置移动后，页面滚动条滚动时，元素相对浏览器视图窗口的位置保持不变，即元素不会随着页面滚动条移动。
4、代码示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>position fixed</title>

     <style>

         .fixed{

             border: 2px solid blue;

             width: 200px;

             height: 100px;

             /*如果只设置postion，而不设置top、bottom、left、right,则元素的位置不会发生改变*/

             position: fixed;

             top:200px;

             left: 200px;

         }

         .wh{

             width: 100%;

             height: 800px;

             background-color: grey;

         }

     </style>

 </head>

 <body>

     <h1>fixed</h1>

     <div class="fixed">

         div element position:fixed

     </div>

     <div class="wh"></div>

 </body>

 </html>

absolute:
1、移动参考物，是它的上级指定了位置的一个元素，它的上级元素可以是父级，也可以是父级的父级。
2、它的上级元素必须指定了position属性的值为relative、fixed、absolute之一(static排除在外)
3、需要设置top、bottom、left、right，元素的位置才会移动
4、一般会搭配一个position属性为relative的父级元素使用
5、代码示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>position absolute</title>

     <style>

         .parent {

             border: 2px solid red;

             width: 400px;

             height: 300px;

             padding: 10px;

             position: relative;

         }

         .absolute{

             border: 2px solid blue;

             width: 200px;

             height: 50px;

             position: absolute;

             top: 50px;

             left: 100px;

         }

     </style>

 </head>

 <body>

     <div class="parent">

         parent element position:relative

         <div class="absolute">

             div element position:absolute

         </div>

     </div>

 </body>

 </html>

【CSS】定义元素的位置的更多相关文章

  1. css中元素的位置

    一.display 1.display:none 隐藏标签 2.display:inline 将块级标签改为内联标签 3.display:block 将内联标签改为块级标签 4.display:inl ...

  2. CSS定义字体间距 字体行与行间距

    CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性     属性含义     属性值 Word-s ...

  3. CSS块元素与内联元素（转）

    为什么<a><span>这种标签定义width,height等CSS属性时会发现完全不生效? 因为它们不是容器,它们是内联元素,不是块元素 CSS 块元素与内联元素 关键字: ...

  4. 【CSS】元素样式

    1.使用CSS的三种方式: 方式一.通过元素的style属性来设置元素的样式 方式二.在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源,通常是一个C ...

  5. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  6. （转）CSS定义字体间距 字体行与行间距

    源网址:http://www.cnblogs.com/jian1982/archive/2010/07/03/1770349.html CSS定义字体行间距 line-height:xxpx; CSS ...

  7. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  8. HTML。CSS浮动元素详解

    浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...

  9. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

随机推荐

  1. LoRa---她的简介和她的专业术语

    LoRa是LPWAN(低功耗广域网)通信技术的一种,其作用距离超过 15 公里,连接节点可达 100 万个.低功耗与长距离极限的组合可将最大数据速率提升至每秒 50千比特(Kbps). LoRa 是  ...

  2. sudo apt-get update 去除设置的代理

    今天想装个软件(wine),使用 sudo apt-get update 命令时,发现给出很多Ign 语句,总出现 Connecting to proxy.http://10.0.126.1:1312 ...

  3. KVM虚拟机管理——虚拟机创建和操作系统安装

    1. 概述2. 交互式安装2.1 图形化-本地安装2.1.1 图形化本地CDROM安装2.2.2 图形化本地镜像安装2.2 命令行-本地安装2.2.1 命令行CDROM安装2.3 图形化-网络安装2. ...

  4. Js_特效

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  5. Unix domain socket 简介

    Unix domain socket 又叫 IPC(inter-process communication 进程间通信) socket,用于实现同一主机上的进程间通信.socket 原本是为网络通讯设 ...

  6. WebService技术，服务端and客户端JDK-wsimport工具（一）

    使用webservice服务,需要了解几个名词:soap 简单对象协议.http+xml . WSDL 先看下代码结构: 服务端代码与客户端代码分别处于两不同的包中 一.服务端内容 服务端: @Web ...

  7. MOSFET中的重要参数

    最近在调试MOSFET电路中,发现了更多问题,比如同样的PI反馈控制电路可以很好的控制PMOS工作,却对NMOS不能很好控制.当然你肯定会说那是因为PMOS和NMOS不同呀,这自然没有错,我在上一篇文 ...

  8. Katalon Studio学习笔记(二)——请求响应中文乱码解决方法

    Katalon Studio接口测试发现返回的中文消息是乱码,这是因为KS的编码格式是UTF-8,因此导致中文字体出现乱码.如下图所示: 在我们的系统中添加一个名字为JAVA_TOOL_OPTIONS ...

  9. 强化学习算法DQN

    1 DQN的引入 由于q_learning算法是一直更新一张q_table,在场景复杂的情况下,q_table就会大到内存处理的极限,而且在当时深度学习的火热,有人就会想到能不能将从深度学习中借鉴方法 ...

  10. 冲刺Two之站立会议3

    今天继续昨天的工作,对主界面进行设计优化,并成功将各个按钮和对应的功能模块连接了起来.并对服务器部分进行了部分改进,包括登录界面的美观性和服务器数据库部分的处理.