`
fanfanlovey
  • 浏览: 73099 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

CSS定位

    博客分类:
  • HTML
阅读更多
参考链接
http://www.cnblogs.com/chinafine/articles/1765967.html
http://www.ipmtea.net/css/201010/09_335.html
http://www.cnblogs.com/polk6/p/3214847.html

position-fixed  固定定位,能单独使用,脱离文档流
比如html5中导航 ,tab定位,一般相对于body定位
fixed是特殊的absolute,即fixed总是以body为定位对象的

position:absolute 绝对定位,不能单独使用,需要父亲position属性,脱离文档流
需要设置父div的position属性,设定好了之后相当于父div进行定位
给定一个div 取名 sub1的position设置为absolute后,其到底以谁为对象进行偏移呢?这里分为两种情况:
(1)当sub1的父对象parent也设置了position属性,且position的属性值为absolute或者relative
也就是说,不是默认值的情况,此时sub1按照这个parent来进行定位。注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以parent的哪个定位点来进行定位呢?如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。接下来的问题是,sub2的位置到哪里去了呢 由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于 parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于 sub1,而是直接从parent开始。
这里有个注意的地方是sub1脱离了文档流到新的定位地方时,就会显示显示自身大小,这个时候可以加100%来显示

(2)如果sub1不存在一个有着position属性的父对象
那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。

position:relative 相对定位,相对应本身自己进行定位,能单独使用,未脱离文档流
比如有两个div 一个div1 一个div2  此时正常排版时候div2紧跟着div1进行排列,此时如果需要div2重叠div1 此时可以用position:relative来进行真对自身进行相对定位
相关属性 top left bottom right

position:static 默认定位,不起作用,一般不设置,未脱离文档流

默认情况下div的属性
分享到:
评论

相关推荐

    html+css定位练习

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

    借助css定位实现动态关联的一个例子

    本话题主要关注如何利用CSS定位技术实现动态关联的效果,这对于网页设计和前端开发至关重要。下面将详细阐述CSS定位的基本概念、常见定位方式以及如何应用它们来创建动态关联效果。 首先,了解CSS定位的基本概念。...

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

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

    前端css定位.pdf

    总的来说,CSS定位技术为前端布局提供了强大的控制能力,可以实现元素的精确布局。理解定位的工作原理及其在不同布局方式(标准流、浮动、定位)中的应用,对于前端开发者来说至关重要。在网页布局中,定位通常是在...

    css定位绝对相对定位

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

    CSS定位.pdf

    CSS定位是网页设计中至关重要的一个概念,它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式,分别是默认定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。 1. **...

    什么是css定位?css定位怎么使用.docx

    ### 什么是CSS定位? CSS(层叠样式表)定位是一种用于控制HTML元素在网页上的位置的方法。通过CSS定位,开发者可以精确地控制元素相对于其原始位置、父元素或浏览器窗口的位置。CSS提供了多种定位方式,主要包括...

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

    4. CSS定位: 定位是CSS中的一项重要技术,用于控制元素在页面上的精确位置。主要有以下几种定位方式: - `static`:默认值,元素按常规流排列。 - `relative`:相对于其正常位置偏移。 - `absolute`:相对于...

    网页css定位,滤镜ppt课件+实例

    网页CSS定位和滤镜是构建动态、美观网页的关键技术,它们极大地丰富了网页的设计与交互体验。在这份资源中,包含的"CSS5_定位"和"CSS6_尺寸"两个PPT课件以及相关的实例网页,将帮助我们深入理解和应用这些概念。 ...

    CSS+Js定位与相对定位

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

    有关CSS定位、隐藏的案例分享

    本篇文章将深入探讨两个关键概念:CSS定位和元素的隐藏与显示,通过具体的案例来阐述这些知识点。 一、CSS定位 定位是CSS中用于控制元素在页面上精确位置的重要技术。主要的定位机制有以下几种: 1. 静态定位...

    css定位的介绍大全.docx

    CSS(层叠样式表)是网页设计中用于控制布局和样式的语言,它的重要性在于能够实现灵活、响应式的设计。本文将深入探讨CSS中的四个关键...通过实践和深入学习,我们可以更好地掌握CSS定位,从而提升网页设计的质量。

    Dreamweaver CS6之Div+CSS定位.pdf

    在网页设计中,Div+CSS定位是构建高效、响应式布局的关键技术。Dreamweaver CS6作为一款强大的网页设计工具,提供了直观的界面来处理Div和CSS的定位问题。本文将详细探讨在Dreamweaver CS6中,如何利用Div和CSS的...

    Div CSS网站布局视频教程第10课_理解CSS定位与div布局

    本教程将深入讲解CSS定位与div布局,这是创建复杂网页结构的关键技能。在第10课中,我们将详细探讨以下知识点: 1. **CSS盒模型**:理解CSS盒模型是掌握布局的基础。每个HTML元素都是一个矩形的盒子,包括内容区域...

    div+css定位代码示例

    div+css定位代码示例 说明了绝对和相对

    css定位表格

    在本主题“CSS定位表格”中,我们将深入探讨如何使用CSS来创建和定位不同布局的表格,包括单行一列、两行一列、三行一列以及多列布局。这些布局通常基于浮动(float)和绝对定位(absolute positioning)方法。 1. ...

    css浮动和定位

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

    借助CSS定位来实现把一个DIV放到另一个div右下角

    借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: 复制代码代码如下: ”box1″> ”box2″>测试内容</div> </div> <style> <!– #box1{width:600px;height:600px;background:...

Global site tag (gtag.js) - Google Analytics