展开

关键词

CSS定位

CSS定位在布局的时候绝对是一大主力,从css1的浮动到css2定位支持远胜对其他的支持到现在css3定位的稳定,css定位的地位不言而喻。 CSS定位有三个:普通流(也有人叫标准流)、浮动和定位流(纯属个人理解)。 普通流:由HTML标签特性决定,块、行、行内,由标签特性由上往下布局。 定位流:有static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)四种定位。 绝对定位absolute:脱离文档流,相对于其包含块定位,在没有设置距离的时候会随着父元素移动,设置距离的时候在没有相对定位的块里面,以body为块。在设置相对定位的块里面,设置距离以这个块为准。 固定定位fixed:脱离文档流,以可视区域为准,会一直显示在可视区域,屏幕滑动也会显示在定位的位置。

21120

css 定位

一、相对定位 position: relative 相对默认的布局位置进行定位,也就是相对自己应该在的位置来定位。 二、绝对定位 position: absolute .box { position:absolute; top:10px;//相对定位点,从上到下偏移10px left:10px; //相对定位点,从左到右偏移 绝对定位元素也看不见绝对定位元素。所以下图2个box2发生了重叠 ? 绝对定位定位对象是从它的父元素找是否有relative/fix/absolute。 如果都找不到就是以html根节点为定位点。 所以使用absolute绝对定位的时候,最好在父元素上设置相对定位relative。 ? 设置绝对定位之后,块级元素宽度会收缩,宽度由内容决定。 四、固定定位 position: fixed 相对浏览器窗口进行定位。因此当滚动产生时,固定定位元素依然处于窗口的某个固定位置。 比如说浏览器右边 回到顶部的按钮就是采用的固定定位

38020
  • 广告
    关闭

    【玩转 Cloud Studio】有奖调研征文,千元豪礼等你拿!

    想听听你玩转的独门秘籍,更有机械键盘、鹅厂公仔、CODING 定制公仔等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS——定位

    定义 位置(Position)属性是对HTML元素的位置进行定义的CSS属性。 left 设置定位元素左外边距边界与其包含块左边界之间的偏移。 overflow overflow该属性作用在block型元素上。 position position该属性设置元素的定位方式, 且在动画特效脚本化时效果很好。 right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 vertical-align 设置元素的垂直对齐方式。 变更点 CSS3增加了一个具有强大布局能力的弹性合子模型,可以完全代替原来的float

    17610

    CSS定位

    静态定位 所有的标准流都是静态定位 position:static; 一般用于将某些已经定位的元素还原成标准流,用的很少 偏移值对于静态定位来说不起作用,我们以后说的元素定位不包括静态定位 <! 相对定位是相对自己的标准流的位置进行定位移动 position:relative; 特性: 1. 只要有一个元素(A元素)是定位(相对,绝对,固定)的任何一个,这个绝对定位的元素就会参照这个A元素进行定位,并且不会在往上找了,如果一个都没有,最终会以html元素定位 2.脱标 1.1. 移动位置基准 静态static 不脱标正常模式 不可以 正常模式 相对定位relative 不脱标占有位置 可以 相对自身位置移动 绝对定位absolute 完全脱标,不占有位置 可以 相对于定位的父级移动位置 固定定位fixed 完全脱标,不占有位置 可以 相对于浏览器移动位置 z-index 控制“定位”元素的叠放层级 z-index只针对定位元素有效果 z-index值越大,层级越高 如果父元素已经比较过层级了

    28840

    css 定位

    下 relative对fixed    限制z-index层级; 2)本身特征 定位 1、相对自身   定位移动相对于自身   2、无侵入   relative定位不影响其他元素   margin 位置跟随   原来什么位置,绝对定位后还是什么位置   (ie7 永远的inline-block水平) 配合margin的精确定位 4)绝对定位实现相对效果 位置特别重要——充分利用跟随特性 图标图片相覆盖 备注:动画尽量作用在 绝对定位的元素上。 容器无需固定width/height值,内部元素亦可拉伸   css驱动的左右半区翻图浏览效果 ? ? 2. </title> 7 <link rel="stylesheet" href="<em>css</em>/absolute-layout.<em>css</em>"> 8 <style> 9 body { font-family

    49810

    css定位

    元素的正常定位 元素的类型分为块级元素和行级元素。 比如div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。 相对定位 相对定位是对于块级元素原本应该出现的位置来说的。 然而相对定位中,其他的元素位置不变,所以相对定位会导致覆盖其他元素的内容。 绝对定位 绝对定位是将元素脱离文档流,把元素独立于其他所有的元素,定位在页面中的指定位置上。 <html> <head> <style type="text/<em>css</em>"> img {float:right} </style> </head> <body>

    在下面的段落中,我们添加了一个样式为

    </body> </html> ---- 如果说像绝对定位脱离了文档流,那在这个例子里面,图片肯定是盖住了文字导致文字无法正常看的,但是用浮动的话,文字会围着图片,而不会导致文字被挡住的情况。

    15720

    CSS Position 定位

    CSS Position 定位 #1 说明 #1.1 什么是Position塌陷 关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式。 #2.2 position: relative 该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。 相对于normal flow中的原位置来定位。 绝对定位的元素可以设置外边距(margin),且不会与其他边距合并。 生成绝对定位的元素,其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。 在所有情况下(即便被定位元素为 table时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。

    15310

    CSS定位概述

    CSS中有三种基本的定位机制:普通流,浮动和绝对定位。 1.相对定位:relative 如果对一个元素进行相对定位,它将出现在它所在的位置上,然后可以通过设置垂直或者水平位置,让这个元素“相对于”它原来的位置进行移动,这时元素依然占据原来的位置,但移动后会覆盖其他的元素 2.绝对定位:absolute 相对定位实际上依然是存在文档流中,但绝对定位则会使元素脱离文档流,绝对定位的元素是相对于距离他最近得已定位的祖先元素确定的,如果元素没有已定位的祖先元素,那么它的位置是相对于初始包含块的 绝对定位同样可以通过z-index来对其设置叠放层次。 3.固定定位: 顾名思义,固定在浏览器某一位置。 4.浮动:float 浮动的框可以左右移动,直至其碰到包含框或另一浮动框的边缘。

    36920

    CSS定位特性

    CSS属性书写顺序 布局定位属性:display / position / float / clear / visibility / overflow 自身属性:width / height / margin 将盒子定在某一个位置,所以定位是在摆盒子,按照定位的方式移动盒子 定位=定位模式+边偏移 定位模式 通过CSS中的position值来设定 值 语义 static 静态定位 relative 相对定位定位元素相对于其父元素下边线的距离 left left:80px 左部偏移量,定位元素相对于其父元素左边线的距离 right right:80px 右部偏移量,定位元素相对于其父元素右边线的距离 相对定位 : 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位 如果祖先元素有定位,则以最近一级有定位祖先元素为参考点移动位置 绝对定位不占有原先的位置 子绝父相 父元素加相对定位,子元素加绝对定位 父盒子不加定位的话 ,绝对定位会压住所有内容

    8740

    CSS 定位详解

    CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position。 display属性指定网页的布局。两个重要的布局,我已经介绍过了:弹性布局flex和网格布局grid。 定位定位基点是视口)。 定位自动切换回relative定位

    CSS 代码极其简单 CSS 代码也很简单。

    25340

    CSS 定位详解

    CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position。 display属性指定网页的布局。两个重要的布局,我已经介绍过了:弹性布局flex和网格布局grid。 fixed定位定位基点是视口)。 定位自动切换回relative定位。 img src="pic1.jpg">

    1 2 3 复制 CSS CSS 代码也很简单。

    13010

    前端基础-CSS定位

    title></title> <style type="text/<em>css</em>"> .box{ width:100px; height:100px; border:1px solid 语法:position:relative <head> <meta charset="utf-8"> <title></title> <style type="text/<em>css</em>"> .box 停止 语法:position:absolute <head> <meta charset="utf-8"> <title></title> <style type="text/<em>css</em>"> .box ></title> <style type="text/<em>css</em>"> .box{ width:100px; height:100px; border:1px solid #000; type="text/css"> .box{ width:300px; height:200px; background:#abcdef; position:fixed;/

    19520

    CSS基础(五):定位

    CSS定位机制 CSS 有三种基本的定位机制:相对定位、浮动和绝对定位。 相对定位 相对定位指的是设置为相对定位的元素框会偏移某个距离。 type="text/css"> .box { width: 200px; height:100px; border <html lang="en"> <head> <meta charset="utf-8"> <title>不设置浮动</title> <style type="text/<em>css</em> 更多请参考 绝对<em>定位</em> 设置为绝对<em>定位</em>的元素框从文档流完全删除,并相对于其包含块<em>定位</em>,包含块可能是文档中的另一个元素或者是初始包含块。 元素<em>定位</em>后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 绝对<em>定位</em>的元素的位置相对于最近的已<em>定位</em>祖先元素,如果元素没有已<em>定位</em>的祖先元素,那么它的位置相对于最初的包含块。

    18320

    CSS定位属性

    定位类别 1.相对定位 相对定位就是相对于自己以前在标准流中的位置来移动 语法: position: relative; 配合left, top, right,bottom等属性使用 特点 相对定位是不脱离标准流的 , 会继续在标准流中占用一份空间 在相对定位中同一个方向上的定位属性只能使用一个 eg: left和right, top和bottom 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素 /行内块级元素 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素 设置margin/padding等属性的时会影响到标准流的布局 2.绝对定位 默认情况下绝对定位就是相对于 (父亲,爷爷)元素, 并且 祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素(最近的祖先)作为参考点 3. , 不会占用标准流中的空间 固定定位和绝对定位一样不区分行内/块级/行内块 三定位属性的应用 1.

    12240

    前端:CSS定位position

    absolute:设置为 absolute 的元素的 top、bottom、left和 right相对于最近的定位不是 static的父元素。 如果所有父元素定位都是 static,则相对于 window进行定位。元素不占据页面流中的位置。 fixed:设置为 fixed 的元素,相对于浏览器窗口进行定位。元素不再占据页面流中的位置。 如果元素的 position设置为 absolute,left指的是元素的左侧边和最近定位不是 static的父元素的左侧边的距离。right、top和 bottom同理。

    22010

    css属性及定位操作

    颜色是通过CSS最经常的指定: 十六进制值 – 如: #FF0000 一个RGB值 – 如: RGB(255,0,0) 颜色的名称 – 如: red 文字属性 文字对齐 text-align 属性规定元素中的文本的水平对齐方式 css盒子模型 margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。 用于四边; 提供两个,第一个用于上-下,第二个用于左-右; 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下; 提供四个参数值,将按上-右-下-左的顺序作用于四边; 浮动(float)属性 在 CSS relative(相对定位) 相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。 absolute(绝对定位) 定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。

    6850

    CSS定位之position详解

    relative 相对定位。相对于原本自己的位置,其他的元素样式不会发生改变。 position 绝对定位。 <html> <head> <style type="text/<em>css</em>"> .span-2 { position:relative; top:10px; left:10px; } </style> </ <html> <head> <style type="text/<em>css</em>"> </style> </head> <body> <div class="div-1" style="background-color <html> <head> <style type="text/css"> .div-3 { position:absolute; right:0; top:0; } </style> </head> <html> <head> <style type="text/<em>css</em>"> .div-1{position:relative;} .div-3 { position:absolute; right:0;

    45960

    css的position定位详解

    position元素定位四个取值:static(静态默认文档流),relative(相对定位,相当于原文档流进行定位),absolute(绝对定位,相当于上个已经定位的父级元素进行定位),fixed(相当于浏览器窗口进行固定

    列表2
    列表3
    css ,根据父级已经定位的元素进行偏移,如果父级元素没有定位以body进行偏移,偏移后不占用文档流,偏移后,下面的元素进行部位上去 父级元素没有定位的absolute定位情况: ?
    列表1
    列表1-1
    列表2
    列表3
    css 父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白 ? iii.

    36630

    css中的定位问题

    4种定位方式如下: 相对定位,绝对定位,固定定位,静态定位 相对定位: position:relative 会占用文档的初始页面。 可以通过left,top,right,bottom来设置,理解相对的概念,相对与绝对定位的偏移量; 绝对定位: position:absolute 脱离了文档流,设置左上右下的距离后就一直定位在那里了 ,就如一张纸将名字写在开头,无法改变,但页面显示滚动条时会让它看不见; 固定定位: position:fixed 就是固定住位置,不管滚动条移动到哪里都不会改变位置,基本可以参考那种广告; 静态定位

    19420

    css教程之定位属性

    css教程之定位属性 一、position position:static | relative | absolute | fixed static 对象遵循常规流。 此时4个定位偏移属性不会被应用。 relative 相对定位,存在占位,原来的元素位置不会变。 absolute 绝对定位,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。 fixed 固定定位,相对屏幕定位,不会随页面移动 .pos{ position:absolute; } 二、z-index:1 层级显示 数字越大显示越前面 .zindex{

    14210

    相关产品

    • 云直播

      云直播

      云直播(CSS)为您提供极速、稳定、专业的直播云端处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、慢直播、快直播三种服务,分别针对大规模实时观看、高并发推流录制、超低延时直播场景,配合移动直播 SDK,为您提供一站式的音视频直播解决方案。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券