CSS定位
Static 默认定位
Relative 相对定位:left 和top
position: relative;/*相对定位*/
left:40px;/*在原来的位置向右移动*/
top:100px;/*在原来的位置向下移动*/
他的参照点是他原来位置
Absolute 绝对定位:元素从原来的位置脱离,让出原来的空间,同时相对于他所
存在的离自己最近的非标准流的盒子而言的
position: absolute;/*绝对定位*/
left:40px;/*在原来的位置向右移动*/
top:100px;/*在原来的位置向下移动*/
他的参照点是他原来位置
Fixed 只根据body的绝对定位

CSS定位小技巧的更多相关文章

  1. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  2. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  3. 第八十四节,css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  4. CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  5. html/css/js小技巧实例

    一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...

  6. 一些常用的html/CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

  7. CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

  8. CSS设置小技巧

    水平居中 对于元素的水平居中,有三种情况: 行内元素(文字.图片等):text-align: center; 定宽块状元素(有设置宽度的block元素):margin: 0 auto; 不定宽块状元素 ...

  9. 【温故知新】——CSS黑魔法小技巧可以少些不必要的js

    前言:这篇文章是转载[前端开发博客]的一篇技术文章,并非本人所写.只是个人觉得很实用,所以分享给大家.原文链接:github.com 1.利用 CSS 的 content 属性 attr 抓取资料需求 ...

随机推荐

  1. socket的简单通信

    ///客户端 package com.ch.day11_myclient; import java.io.BufferedReader;import java.io.IOException;impor ...

  2. python随机数的使用记录

    一.random模块简介 Python标准库中的random函数,可以生成随机浮点数.整数.字符串,甚至帮助你随机选择列表序列中的一个元素,打乱一组数据等. 二.random模块重要函数 1 ).ra ...

  3. vsftpd基本配置(原)

    前提:iptables关闭或放行,selinux关闭或放行. 目标:创建虚拟ftpuser到指定的www.ftpuser.com目录,且只能在本目录下. 创建帐号 useradd -d /var/ww ...

  4. Web前端开发工程师面试题

    Web前端开发工程师面试题1.说说css的优先级?2.在移动端中,常常使用tap作为点击事件,好处是?会带来什么问题?3.原生JS的window,onload与Jquery的$(document).r ...

  5. 【Pro ASP.NET MVC 3 Framework】.学习笔记.3.MVC的主要工具-单元测试

    IProductRepository接口定义了一个仓库,我们通过它获得.更新Product对象.IPriceReducer接口指定了一个功能,它将要对所有的Products实施,通过一个参数,降低他们 ...

  6. javascript || and &&

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

  7. HDU 3966:Aragorn's Story(树链剖分)

    http://acm.hdu.edu.cn/showproblem.php?pid=3966 题意:有n个点n-1条边,每个点有一个权值,有两种操作:询问一个点上权值是多少和修改u到v这条链上的权值. ...

  8. greenplum集群安装

    一.环境配置 1.地址分配 192.168.1.201 mdw master 192.168.1.202 sdw1 segment1 192.168.1.203 sdw2 segment2 2.创建用 ...

  9. SQLITE3 使用总结

    转自: http://blog.chinaunix.net/uid-8447633-id-3321394.html 前序: Sqlite3 的确很好用.小巧.速度快.但是因为非微软的产品,帮助文档总觉 ...

  10. 【转】MYSQL入门学习之一:基本操作

    转载地址:http://www.2cto.com/database/201212/173868.html 1.登录数据库    www.2cto.com       命令:mysql -u usern ...