10步掌握CSS定位: position static relative absolute float

关注 jikeytang

10步掌握CSS定位: position static relative absolute float

转载

jikeytang 2010-06-17 11:36:00

文章标签 css html 文章分类 虚拟化 云计算


​​http://www.see-design.com.tw/i/css_position.html​​


  • 赞
  • 收藏
  • 评论
  • 分享
  • 举报

上一篇：各种浏览器css hack

下一篇：随机显示数字

提问和评论都可以，用心的回复会被更多人看到 评论
发布评论
全部评论 () 最热 最新
相关文章
  • 【CSS浮动属性】别再纠结布局了！一文带你玩转CSS Float属性

    在网页设计的世界里，CSS浮动属性（float）就像一把双刃剑。它能够让元素脱离文档流，实现灵活的布局，但如果处理不当，也可能引发一系列布局问题。今天，我们就来深入探讨这把“剑”的正确使用方法，让你的页面布局既美观又稳定。一、什么是CSS浮动属性浮动属性是CSS中的一个定位属性，它允许元素脱离文档流，并向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动元素的边缘。简单来说，它就像是让元素
    文档流 CSS 侧边栏
  • “CSS 定位”如何工作？（补充）——WEB开发系列34

    CSS定位是一个非常重要的布局工具，它允许我们精确地控制元素的位置，从而创建复杂的布局效果。定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
    css3 HTML web前端 css定位 百度
  • Java static关键字的作用有哪些？

    在Java中，static关键字用于修饰类的成员（变量、方法、代码块和内部类），使其成为类级别的成员，而不是实例级别的成员。以下是static关键字的主要作用：1. 静态变量（类变量）定义：使用static修饰的变量称为静态变量或类变量。特点：静态变量属于类，而不是类的某个实例。所有实例共享同一个静态变量。静态变量在类加载时初始化，且在程序运行期间只初始化一次。示例：clas
    静态变量 java 内部类
  • CSS关于定位float、static、relative、absolute、fixed

    css定位
    css relative 定位
  • CSS position绝对定位absolute relative

    文章出处和来源网址：http://www.divcss5.com/rumen/r403.shtml前言 常常使用 position 用于层的绝对定位，比如我们让一个层位于一个层内具体什么位置，为即可使用position:absolute和position:relative实现。正文一. posit...
    CSS 前端开发
  • Position定位：relative | absolute

    定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理·
    其他
  • CSS 浅析position：relative/absolute定位方式

    一、position：relative 相对定位分两种情况分析：· 无 position: relative；· 有 position: relative。代码如下图：显示效果如下图： 我们给 box4加入 position: relative属性. * 如果元素加上 position: relative 
    css 其他
  • CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间，一个完整的页面是由很多个页面堆积形成的，如下图所示 CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。 ◆position:static　无定位 　　元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。　　该属性值是所有元素定位的默认情况
    CSS absolute relative fixed
  • CSS基础-定位：static, relative, absolute, fixed

    在网页布局的世界里，CSS定位是构建页面结构不可或缺的一环。四种基本的定位类型——static、relative、absolute、fixed，每种都有其独特的应用场景和行为特点。理解它们之间的差异，
    前端 CSS 文档流 html
  • css position relative and absolute布局

    Created by Jerry Wang, last modified on Sep 01, 2014</><style type="text/css">.highlight {  backgrou -color:yellow;  text-decoration:underline;  width: 10...
    WebIDE css html 公众号
  • position定位relative与absolute

     position定位是前端新手的又一个障碍，好比是双节棍，刚开始练习的时候很容易伤者自己，纯熟似李小龙刷起来自然是得心应手，威力无穷。position定位在实际应用中多见于和js同时使用，纯静态页面使用position好比杀鸡用牛刀，大材小用不说，用起来也不会顺手。首先指出一点：使用position对某一个标签进行定位的同时，该标签同时支持了left,right,top,bot
    absolute relative position
  • css - 定位(float、relative、absolute、fixed、sticky)说明

    元素包括块级元素和行级元素，块级元素独占一行(可设置宽高)，行级元素(不能设置宽高)
    文档流 块元素 宽高
  • 区分CSS中position定位属性absolute与relative

     absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。Absolute，CSS中的写法是：position:absolute;
    职场 web css web开发 休闲
  • css定位中的position:relative;absolute的解释

    position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static） 如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。 absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对定位，那么#sub的绝对定
    元素 absolute relative position
  • css position: relative，absolute具体解释

    关于CSS中 position在布局中非常重要，查了非常多资料都说的非常难理解。以下说说个人的理解： 语法： position： relative | absolute relative： 对象遵循常规流，而且參照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响
    css 绝对定位
  • CSS+DIV定位分析(relative,absolute,static,fixed)

    各个属性值的定义： 1、static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-in
    CSS 绝对定位 属性值 未定义 相对定位
  • 【前段开发】10步掌握CSS定位: position static relative absolute float

    【前段开发】10步掌握CSS定位: position static relative absolute float
    css html
  • css position: absolute、relative详解

    今天CSS的时候遇到了position: absolute、relative的问题，一直比较迷糊，今天终于搞清楚了。CSS2.0 HandBook上的解释：设置此属性值为 absolute 会将对象拖离出正常的文档流绝对而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已...
    绝对定位 基线 相对定位 文档流 css
  • html 元素定位position-relative, absolute, fixed, static

    看到这个，你有什么想法？ Difference between static and relative positioning 如果你能完全看明白，那几本上css 元素的东西基本都会了。本文也不用往下看了。 自己接触web这么多年，虽说前端有接触过，但还是没有系统地学习过，和完整的实践过。很多东
    css position html ide 归零
  • CSS里面position：relative与position：absolute 区别

    position：absolute这个是绝对定位；是相对于浏览器的定位。比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。比如：<div class="1"&gt
    相对定位 绝对定位 数据
jikeytang
    关注
    精品课程领资料
    免费资料>
    2025软考
    系统架构设计师 系统规划与管理师 软件设计师 系统集成项目管理工程师
    信创认证
    系统架构师 信创集成项目管理师 信创规划管理师 系统开发工程师
    厂商认证
    CKA/CKS架构师 红帽认证工程师 Oracle-OCP认证 Oracle-OCM认证
    IT技术
    数据库高级工程师 AIGC大模型实战 Linux云计算架构师 Python全栈开发
    华为认证
    数通HCIP认证 云计算HCIE认证 华为存储HCIE认证 HCIP安全认证
    近期文章
    • 1.智慧交通红绿灯检测数据集VOC+YOLO格式1215张3类别
    • 2.智驾“请抬脚”提示感悟 - 当工程师思维遇见用户思维
    • 3.【详解】Hadoop命令行运行时指定参数
    • 4.Java 高效实现 WAV 音频拼接彻底摆脱 FFmpeg 的轻量本地方案
    • 5.比付费版还爽，全系列支持
    新人福利
    • 意见
      反馈
    • 训练营训练营

    举报文章

    请选择举报类型

    内容侵权 涉嫌营销 内容抄袭 违法信息 其他

    具体原因

    包含不真实信息 涉及个人隐私

    原文链接（必填）

    补充说明

    0/200

    上传截图

    格式支持JPEG/PNG/JPG，图片不超过1.9M

    已经收到您得举报信息，我们会尽快审核
    • 赞
    • 收藏
    • 评论
    • 分享
    如有误判或任何疑问，可联系 「小助手微信：cto51cto」申诉及反馈。
    我知道了
    51CTO首页
    AI.x社区
    博客
    学堂
    精品班
    软考社区
    免费课
    企业培训
    鸿蒙开发者社区
    信创认证
    公众号矩阵
    移动端
    视频课 免费课 排行榜 短视频 直播课 软考学堂
    全部课程 软考 信创认证 华为认证 厂商认证 IT技术 PMP项目管理 免费题库
    在线学习
    文章 资源 问答 课堂 专栏 直播
    51CTO
    鸿蒙开发者社区
    51CTO技术栈
    51CTO官微
    51CTO学堂
    51CTO博客
    CTO训练营
    鸿蒙开发者社区订阅号
    51CTO软考
    51CTO学堂APP
    51CTO学堂企业版APP
    鸿蒙开发者社区视频号
    51CTO软考题库
    51CTO博客

    51CTO博客

    • 首页
    • 关注
    • 排行榜
    • 精品课程升职加薪
    • 免费资料领资料
    • 软考题库软考题库
      软考题库
      科目全、试题精、讲解专业，扫码免费刷
    • 搜索历史 清空
      热门搜索
      查看【 】的结果
    • 写文章
    • 创作中心
    • 登录注册
    51CTO博客

    Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号

    关于我们
    官方博客 全部文章 热门标签 班级博客
    了解我们 网站地图 意见反馈
    友情链接
    鸿蒙开发者社区 51CTO学堂
    51CTO 软考资讯