`
black_star
  • 浏览: 34413 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

css中的决定定位与相对定位

阅读更多
  http://zhang-yingjie-qq-com.iteye.com/blog/346230
  今天终于搞懂一点了。
   相对定位:不脱离文档,定位会对其他文档产生影响。相对于父元素为参照物进行定位。margin与top,left单独时效果相同,混合时,效果叠加。
   绝对定位:脱离文档流。以最近祖先的相对或绝对定位元素为参照物。若没有,则以body为父级。left,top已祖先为参照物。margin已原来的位置为参照物。
   若混合,如果方向一致,比如都是做偏移。margin-left,left则叠加。若相反,margin失效。
分享到:
评论

相关推荐

    CSS+Js定位与相对定位

    CSS定位主要包括静态定位、相对定位、绝对定位、固定定位和粘性定位。其中,相对定位是基础,它允许元素相对于其原始位置进行偏移,但不会改变文档流。相对定位的CSS代码通常写作: ```css .element { position: ...

    css定位绝对相对定位

    ### CSS定位详解:绝对定位与相对定位 #### 相对定位(Relative Positioning) 相对定位是一种常见的CSS定位方式,它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...

    20190801-css相对定位.txt

    css 相对定位 设置为相对定位的元素框会偏移某个距离。元素仍然保持其为定位前的形状,它原本所占的空间仍保留。 css相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在她所在的...

    详解css定位与定位应用

    ### 详解CSS定位与定位应用 #### CSS定位概述 定位技术是Web开发中不可或缺的一部分,尤其是在页面布局的设计过程中。良好的定位技巧能够帮助开发者构建出既美观又实用的网站界面。CSS提供了多种定位方式,包括...

    CSS网页布局教程:绝对定位和相对定位

    在CSS(层叠样式表)中,网页布局是构建页面结构和控制元素位置的关键...通过深入理解和熟练掌握绝对定位与相对定位,你可以创建更加灵活和精确的网页布局,提升用户体验。不断实践和试验是成为CSS布局大师的关键步骤。

    css中的定位

    #### CSS定位机制概述 CSS(层叠样式表)为网页提供了强大的样式控制能力,其中定位机制是实现复杂布局的关键技术之一。CSS提供了多种定位方式,包括普通流、浮动以及绝对定位等,每种方式都有其特定的应用场景。 ...

    HTML5&CSS3网页制作:相对定位.pptx

    相对定位是CSS定位模式的一种,它允许我们将元素相对于其原始在文档流中的位置进行偏移。相对定位的特点在于,即使元素的位置发生了改变,但它仍然保持着未定位前的形状,并且不会影响到其他元素在页面上的布局,即...

    dreamweaver 【CSS样式规则对话框详解】& CSS定位详解之绝对定位和相对定位

    有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦

    前端css定位.pdf

    在前端开发中,CSS定位是一项重要的技术,它允许开发者控制HTML元素在页面上的精确位置。定位技术通过定位模式和边偏移属性来实现元素的定位。定位模式包括静态定位(static)、相对定位(relative)、绝对定位(absolute...

    html css中的定位

    本文将深入探讨 HTML CSS 中的定位,包括绝对定位和相对定位。 首先,我们需要理解 CSS 中的基本定位方式。CSS 提供了多种定位模型,如静态定位、相对定位、绝对定位、固定定位和粘性定位。这些定位方式都是为了...

    css 中的定位详解

    相对定位可以相对于元素在文档流中的静态位置,给元素指定一个位置。如果将一个元素设置为相对定位,但是没有为 top、right、bottom、left 等属性设置值,那么元素将保持在文档流中的相同位置,就像使用的是静态定位...

    css图片定位

    CSS提供了多种定位方式,包括静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和粘性定位(sticky)。静态定位是元素的默认定位方式,不改变元素在文档流中的位置。相对定位则...

    divcss盒子之绝对定位和相对定位.docx

    【CSS定位】在网页设计中,CSS定位是一个关键的概念,用于控制元素在页面上的精确位置。定位主要包括静态定位、绝对定位和相对定位三种方式。 1. 静态定位(static):这是元素的默认定位方式,元素按照正常的文档...

    css-绝对定位的参考对象

    在CSS中,定位分为静态定位、相对定位、绝对定位、固定定位等几种方式。静态定位是默认的定位方式,元素遵循正常的文档流;相对定位则保持元素在文档流中的位置,但允许通过偏移量改变位置;而绝对定位则彻底脱离...

    html+css定位练习

    总的来说,HTML+CSS定位是网页设计中的关键技能,熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集,希望你能深入理解定位的概念,提升你的网页设计能力。记得多实践、多尝试,理论与实践相结合才能...

    css浮动和定位

    **二、CSS定位** 定位(Positioning)提供了更精细的控制,使开发者能够精确地指定元素在页面上的位置。定位分为以下几种类型: 1. **静态定位(static)**:这是元素的默认定位方式,遵循正常文档流。 2. **相对...

    css 相对定位 绝对定位 浮动 分析

    相对定位是CSS定位的基础,它允许元素在不改变其在正常文档流中的位置的情况下进行微调。当一个元素被设置为相对定位,通过`position: relative;`,我们可以使用`left`、`right`、`top`和`bottom`属性来调整元素相...

    CSS和Js演示网页绝对定位与相对定位,这些是我们从事前端编程的基础技能,应该学会的东西,这个小示例会告诉你绝对与相对的区别,以及如何去实现他们

    绝对定位和相对定位是CSS布局中的核心概念,对于创建动态、交互式网页至关重要。掌握它们的差异和应用场合,可以帮助开发者更灵活地控制页面元素的布局,提升用户体验。在实际项目中,通常需要根据具体需求结合使用...

Global site tag (gtag.js) - Google Analytics