下载 >  开发技术 >  Web开发 > css 中的定位详解

css 中的定位详解 评分:

CSS 定位属性允许我们操作自然的文档流,在页面上排列方框,以达到美观且用户友好的设计。在实际创建 CSS 布局之前,这是需要理解的最后一个概念。 不同的定位类型(静态、绝对、相对和固定),以及位置的浮动,涵盖了大多数布局场景。在探讨每种定位类型是如何工作的之后,将进行一些练习,使它们真正发挥作用。 1.静态定位 静态定位是页面默认值。元素按照它们在源代码中的顺序依次流动,用块元素和行内元素充满浏览器窗口。静态定位基本上意味着元素没有定位,只是常规的页面流。 尽管它是默认值,但是有时候需要重新设置应用另一种定位的元素时,还是有必要显式地设置为静态定位。例如,打印机会对具有任何定位的页面无所适从,只有一个页面会打印出来,或者元素将会被截断。可以创建一个打印样式, 用于将已定位的元素重新设置为静态定位,以便它们可以正确地打印出来。 2.相对定位 相对定位可以相对于元素在文档流中的静态位置,给元素指定一个位置。如果将一个元素设置为相对定位,但是没有为 top、right、bottom、left 等属性设置值,那么元素将保持在文档流中的相同位置,就像使用的是静态定位一样。但是一旦设置了这些属性,元素将根据所指定的数量,偏离其在页面中的自然位置。但是它填充页面流的空间保持不变。因此,如果给元素指定 50 像素的 top 值和 50 像素的 left 值,那么元素将在这两个方向移动 50 像素,但是在其上边和左边将会出现 50 像素的空白,没有任何东西填充该区域。如图所示。 (图片) 注意:也可以对这些属性使用负值。 3.绝对定位 绝对定位(AP)可用于在页面上精确的 X(水平)和 Y(垂直)坐标位置放置对象。AP 元素的起点值起源于最后一个已定位的父元素。这可能不是直接父元素,如果 AP 元素的父元素使用静态定位,即不会被认为是已定位的,所以 AP 元素在文档树中继续向上寻找已定位的祖先。可能会一直沿着文档树向上寻找,直到找到 body 元素(它被认为是已定位的),并从这一点开始设置 X 和 Y 坐标。 如果想要将绝对定位的元素包含在一个特定的父元素中,请确保将父元素的位置值设置为相对。正如上面所提到的,没有指定值的相对定位不会影响元素,除非给元素指定一个位置。子元素将使用该位置来计算出自己的位置值。 一旦父元素有了定位,就可以为绝对定位的元素设置 top(或bottom)和 right(或left)等属性的值(没有同时使用 right 和 left,以及 top 和 bottom,是因为这些坐标可以相互计算出来,没有必要那么啰嗦)。 记住,(X)HTML 提供一种自然的、从浏览器窗口左上角开始的元素流。尽管利用 CSS 对元素进行移动,但是元素流定义了元素之间的相对关系。这不包括 AP 元素。 AP 元素不是很友好,不合群。尽管它们相对于父元素进行定位,但是它们排除在页面上自然元素流之外;其他元素不能相对于它们,也不知道 AP 元素从何处开始、何处结束。这会导致内容重叠和其他混乱,除非仔细规划 AP 元素的使用。 4.固定定位 与绝对定位一样,固定定位的元素被设置在页面上的特定 X 和 Y 坐标位置。但是位置总是设置为相对于浏览器窗口的可见区域(即视口),而不是像 AP 元素那样相对于父元素。访问者滚动页面时,固定内容将保持在屏幕上的确切位置上。 固定定位可以创造性地用于背景图像或者导航区域。即使你滚动页面以阅读更多内容时,导致区域仍然保持在相同位置。不幸的是,唯一支持固定定位的 Internet Explorer 版本是最后一个版本,即 Internet Explorer7 (该技术越早采纳,大家就越早享受它)。高级 CSS 设计者使用脚本来迫使早期版本的 Internet Explorer 模拟固定定位的效果。但是在练习中,这通常会导致延迟或闪动的页面刷新。如果针对的是早期版本的 IE,那么在决定采用固定定位解决方案之前,应该多多思考和测试。 内容摘自《CSS 与 Dreamweaver CS3 完美网页设计》
...展开详情收缩
分享
收藏 举报

评论 共1条

lichuanglove2002 很好的介绍,代码不错,谢谢指导
2013-03-21
回复
selenium css selector 定位详解

selenium css selector 定位详解

立即下载
详解css定位定位应用

详解css定位与定位应用,很棒的指南哦,让你知道css如何定位

立即下载
CSS中背景background-position负值定位

CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位

立即下载
HTML学习ppt

HTML详解 CSS 选择器 标准盒子模型 浮动 定位

立即下载
CSS布局 案例详解

CSS布局 案例详解 CSS布局 案例详解 CSS布局 案例详解CSS布局 案例详解 CSS布局 案例详解

立即下载
层的定位css前端开发

层的定位css前端开发 层的定位css前端开发 层的定位css前端开发

立即下载
F1实现联机帮助定位功能

F1联机帮助定位功能详解F1联机帮助定位功能详解F1联机帮助定位功能详解F1联机帮助定位功能详解F1联机帮助定位功能详解

立即下载
CSS中背景图片定位方法:background-position的用法

CSS中背景图片定位方法:background-position的用法,附带算法

立即下载
HTML CSS案例教程

CSS 教程案例, CSS盒模型,Css浮动,Css定位等

立即下载
css-4.定位

css定位

立即下载
网站制作中CSS层叠样式表视频详解

网站制作中CSS层叠样式表视频详解,swf格式

立即下载
html css中的定位

HTML中的css样式 的定位 绝对定位和 相对定位

立即下载
css中的定位

css定位 html元素定位 static relative absolute fixed详细讲解,带图。

立即下载
CSS技术在网页设计中的运用.doc

CSS技术在网页设计中的运用,详解,实例解析

立即下载
CSS定位相关

CSS的一些定位设置

立即下载
css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜 

css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜 

立即下载
selenium中定位详解

最近自学selenium,网上找的一个有关定位的详解,蛮详细的

立即下载
第2章 CSS基础知识

第2章 CSS基础知识,讲解CSS的盒子模型,CSS的浮动与定位,利用CSS布局网页等等。

立即下载
高效学习CSS布局,高效学习CSS布局

CSS控制元素的大小; CSS控制元素的定位; CSS控制元素的布局; CSS控制文本的显示; CSS控制列表元素的显示; CSS控制表格元素的显示; CSS控制其他元素的显示; CSS滤镜; 居中问题; CSS布局构架的建立; CSS布局中的自适应问题; CSS布局中的兼容问题; 在Dreamweaver中使用CSS;

立即下载
Selenium_XPath定位详解

Selenium_XPath定位详解

立即下载

热点文章

img

spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip

资源所需积分/C币 当前拥有积分 当前拥有C币
5 0 0
点击完成任务获取下载码
输入下载码
为了良好体验,不建议使用迅雷下载
img

css 中的定位详解

会员到期时间: 剩余下载个数: 剩余C币: 剩余积分:0
为了良好体验,不建议使用迅雷下载
VIP下载
您今日下载次数已达上限(为了良好下载体验及使用,每位用户24小时之内最多可下载20个资源)

积分不足!

资源所需积分/C币 当前拥有积分
您可以选择
开通VIP
4000万
程序员的必选
600万
绿色安全资源
现在开通
立省522元
或者
购买C币兑换积分 C币抽奖
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 4 45
为了良好体验,不建议使用迅雷下载
确认下载
img

资源所需积分/C币 当前拥有积分 当前拥有C币
3 0 0
为了良好体验,不建议使用迅雷下载
VIP和C币套餐优惠
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 4 45
您的积分不足,将扣除 10 C币
为了良好体验,不建议使用迅雷下载
确认下载
下载
您还未下载过该资源
无法举报自己的资源

兑换成功

你当前的下载分为234开始下载资源
你还不是VIP会员
开通VIP会员权限,免积分下载
立即开通

你下载资源过于频繁,请输入验证码

您因违反CSDN下载频道规则而被锁定帐户,如有疑问,请联络:webmaster@csdn.net!

举报

  • 举报人:
  • 被举报人:
  • *类型:
    • *投诉人姓名:
    • *投诉人联系方式:
    • *版权证明:
  • *详细原因: