`
kakashi
  • 浏览: 23932 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

css position 笔记

    博客分类：
  • css
CSS浏览器HTML 
阅读更多

当设定position:absolute 

如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位 
如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。 

 

当设定position: relative 
则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。

 

要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。 

 

 

**还有一个要记住的是css中这种写法 .sf-menu li   是指.sf-menu 下所有的li 子节点,包括 li 下的 li 节点

分享到：
| 关于序列化
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    使用css 绘制笔记本电脑

    本文将详细介绍如何使用CSS绘制一款逼真的笔记本电脑，让网页元素更加生动有趣。 首先，我们需要了解CSS的基本结构。CSS由选择器（Selector）和声明（Declaration）组成，声明则由属性（Property）和值（Value）...

    Web前端网页初级课程 - css（笔记）

    ### Web前端网页初级课程 - CSS（笔记） #### CSS 概述 CSS，全称为 Cascading Style Sheets（层叠样式表），是一种用来描述 HTML 或 XML（包括各种 XML 语言如 SVG、XHTML 等）文档样式的计算机语言。CSS 的主要...

    HTML_CSS学习笔记.docx

    - 浮动（float）、定位（position）以及新的布局模式，如 Flexbox（弹性盒模型）。 14. Flexbox： - 提供了一种灵活的布局方式，允许内容沿主轴和交叉轴方向自动调整。 15. CSS3 样式设置小技巧： - 使用预...

    css学习笔记

    - **背景**：背景属性可以合并写为`background: color image repeat attachment position;`，例如`background: #d00 url(background.gif) no-repeat fixed 0 0;`。 - **字体**：`font:`属性可以缩写，至少包含`...

    CSS笔记全面手册

    4. **定位**：`position`属性（static、relative、absolute、fixed）控制元素的位置，`z-index`决定元素的前后顺序。 ### 三、CSS颜色和背景 1. **颜色**：可以使用色值（如#000000、rgb()、hsl()）、颜色关键词...

    CSS笔记一

    **CSS笔记一** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它负责定义HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现方式。本笔记将深入探讨CSS的基础知识，包括选择器、盒模型、...

    CSS基础知识学习笔记

    ### CSS基础知识学习笔记 #### 一、CSS简介与基本概念 **CSS**(Cascading Style Sheets)即层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS的作用在于控制网页的布局和样式，使网页内容的展现更加...

    CSS样式学习笔记之一：基础知识

    这篇学习笔记将引导我们深入了解CSS的基本概念、选择器、盒模型、布局方式以及样式优先级等核心知识点。 首先，我们从CSS的基本概念开始。CSS是一种样式语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）...

    div css学习笔记

    ### DIV CSS 学习笔记详解 #### 一、文档类型声明 DOCTYPE 在网页开发中，**DOCTYPE**声明是HTML文档的一部分，它告诉浏览器该页面使用的HTML或XHTML的版本和类型。这有助于确保浏览器正确解析和显示页面。在给定...

    CSS学习笔记～～～～

    在`CSS学习笔记-01.md`、`CSS学习笔记-02.md`和`CSS学习笔记-03.md`中，可能会深入讲解这些概念，包括更多选择器用法、布局技巧、CSS3特效和预处理器的使用，帮助读者逐步掌握这个强大的样式语言。

    CSS学习笔记 培训时候老师讲的我做的笔记

    【CSS学习笔记】是我在参加专业培训时记录的详尽资料，这些笔记涵盖了从基础到进阶的各种CSS知识点，对于想要深入理解或学习CSS的人来说，具有很高的参考价值。以下是笔记中涉及的一些关键概念和技巧： 1. **CSS...

    CSS基础_css_笔记

    **CSS基础：开启网页设计之旅** CSS，全称Cascading Style Sheets，是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它是网页设计的重要组成部分，允许我们将表现与内容分离，使网页...

    三天学会css(笔记+素材+作业+源码)

    在CSS（层叠样式表）的学习旅程中，三天时间可以构建一个坚实的基础，尤其是在有详细的笔记、实践素材和源码示例的帮助下。本资源包旨在为初学者提供一个快速掌握CSS概念和应用的途径。 首先，我们要理解CSS的核心...

    DIV+css学习笔记

    总的来说，`DIV+CSS`学习笔记涵盖了CSS的基础概念、选择器、布局、定位、文本、图像、链接样式以及列表等多个方面，是构建网页布局和设计不可或缺的知识。深入理解和熟练运用这些知识点，可以提升网页设计的效率和...

    naofantian HTML_CSS笔记

    `naofantian`的笔记可能还会涵盖如何使用CSS预处理器（如Sass、Less），它们提供更高级的功能，如变量、嵌套规则和混合，提高CSS的可维护性和可读性。同时，笔记可能也会提到CSS框架（如Bootstrap、Foundation），...

    CSS学习笔记-适合初学者

    【CSS学习笔记-适合初学者】 CSS，全称Cascading Style Sheets，即层叠样式表，是网页设计中用于控制页面布局和样式的语言。它与HTML或XML（包括SVG、XHTML等）等标记语言配合使用，使得网页内容表现更加丰富、美观...

    精品专题（2021-2022年收藏）css笔记Css笔记.doc

    CSS笔记主要涵盖了如何定义和应用CSS样式，以及常见的样式属性。 **一、CSS引入方式** 1. 内联样式：在HTML元素的`style`属性中直接写CSS样式，例如`;">文本</p>`。 2. 内部样式表：将CSS写在HTML文档的`<head>`...

    CSS_笔记大全（.DOC）

    **CSS (Cascading Style Sheets)** 是一种样式表语言，用于描述...对于初学者来说，CSS_笔记大全是一个很好的学习资源，涵盖了CSS的基础知识和实用技巧。通过实践和深入学习，可以进一步提升CSS布局和交互设计的能力。

Magicbox
Global site tag (gtag.js) - Google Analytics