ex:让一个div始终显示在屏幕中间 一. css:#idName{position: absolute;z-index: 999;width: ?px;margin-top: ?px;}//此处的初始定位按具体的自己调 计算并设置页面滚动条改变时移动的距离: function sc1(idName) {    var d = document.getElementById(idName);    d.style.top = (document.documentElement.scrollTop

原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.absolute.fixed.默认值为static. 一.定位类型 1.静态定位static 在静态定位的情况下,每个元素都处于常规文档流中.它们都是块级元素,所以就会在页面中自上而上的堆叠起来. 2.相对定位 到底相对哪里定位呢,相对的是它原来在文档流中的位置(或者说是默认位置). 要注意,除了这个元

CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流.浮动.定位.前面两个之前已经讲过,详见博客: 1.CSS(5)---通俗讲解盒子模型 2.CSS(6)---通俗讲解浮动(float) 3.CSS(7)--- 通俗讲解清除浮动 一.为什么要用定位? 如果说浮动关键在一个 "浮" 字上面, 那么 我们的定位,关键在于一个 "位" 上. 我们来思考下定位用于的场景. 1.打Log标签 比如你想在商品的图片想打个标签比如:包邮.最新

前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有时候很令人苦恼.下面根据我的学习和编程经验来谈一下这方面的要点. 要想完美的实现自己的布局,那首先一定要把盒模型搞清楚.盒模型由内容区.内边距(padding).边框(border)和外边距(margin)构成.这些属性值都是可选的,相互之间没有依赖关系,但在具体的布局时会需要设置某些属性.我们平时

CSS有三种基本的定位机制:普通流,浮动和绝对定位. 普通流:在普通流中元素框的位置由元素在html中的位置决定, 1.元素position属性为static或继承来的static时就会按照普通流定位 2.position属性的relative(相对定位)值时,它将出现在他所在的位置上,然后可以通过设置垂直或水平位置,让这个元素相对于它自己移动,  在使用相对定位时(top.left),无论元素是否移动,元素在文档流中占据原来空间,只是表现会改变. <div style="border:

参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html 常见语法 * 通用元素选择器,匹配任何元素 E 标签选择器,匹配所有使用E标签的元素 .info class选择器,匹配所有class属性中包含info的元素 #footer id选择器,匹配所有id属性等于footer的元素 E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用

此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处还请同行朋友指点. 当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们. 一旦你更深入地了解了

CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed 元素flow, overlap 相对参照物: 能否用offset( top, left, bottom, right)参数 是否移出 normal flow 是否可以 overlap 备注 Static 缺省的, normal flow 忽略 No Relative its own normal position √ No Yes 常用作 Absolute元素的container Fi

前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位了 position:relative; → 必须先声明,自己要相对定位了, left:100px; → 然后进行调整. top:150px; → 然后进行调整. 1.2 相对定位的特性 - 不脱标,老家留坑,形影分离 相对定位不脱标,真实位置是在老家,只不过影子出去

一,情景导入:正常文档流:指的是HTML文档在进行内容布局时所遵循的从左到右,从上到下的表现方式.HTML中的大多数元素都处在正常的文档流中,而一个元素要脱离正常流的唯一途径就是浮动或定位.二,定位的常见几种形式:1,CSS有三种基本的定位机制:普通流,浮动和绝对定位:a,普通流demo:<!-- 普通流 --><h1>1.普通流</h1><div ><div ></div><div ></div><di

---恢复内容开始--- CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置. 一切皆为框 div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span 和 strong 等元素称为“行内元素”,这是因为它

CSS根据屏幕分辨率宽度自动适应的办法 第一种办法是js选择CSS <SCRIPT language=JavaScript><!-- Beginif (screen.width == 640){document.write('<link href="/Css/Style.css" rel="stylesheet" type="text/css" />');} if (screen.width == 800){docu

  一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点.   说白了width:auto试图

希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中才可使用的值) 1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素. 3.absolute:对象脱离常规流,此时偏移

---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点.   说白了w

深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识. 上篇文章我们讲完了css布局中盒模型和元素分类的相关知识,同时介绍了box-sizing和行框.这篇我们继续... 一.定位与浮动 上篇我们讲解了不同类型元素的特点,我们可以随意的排列组合他们来达到我们想要的效果.但是他们都是基于一个二维平面的,如果我们想在布局中有遮挡,重叠之类的更丰富效果,我

CSS定位 css定位机制 文档流:元素按照在HTML中的位置决定排布的过程 块级元素是从上到下的,内联元素是从左到右的 浮动 position布局 position css position属性用于指定一个元素在文档中的定位方式.top,right,bottom,left属性则决定了该元素的最终位置. 属性值 描述 static 默认.静态定位, 指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置.此时 top, right, bottom, left 和 z-index属性无效.

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca

http://www.missyuan.com/thread-395406-1-1.html 1. position:static 所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置. 一般来说,不用指定 position:static,除非想要覆盖之前设置的定位. #div-1 { position:static; } 2. position:relative 如果设定 position:relative,就可以使用 top,bot

当屏幕尺寸小于1200px时,应用下面的CSS样式 @media screen and (max-width: 1200px) { /*当屏幕尺寸小于1200px时,应用下面的CSS样式*/ .index_pic_group,.index_supertv,.index_tvcontent,.index_parts,.index_video{width: 1200px;overflow-x:hidden;} }

position 有4中不同类型的定位,分别为static.relative.absolute.fixed 1.static 元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. 2.relative(相对定位) 元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍保留. 默认情况下,它是以父级元素的原始点(左上角)作为原始点,如果没有父级元素,则以文本流(页面的文本区)的顺序在上一个元素的底部作为原始点,配合TRBL(top