精华内容
下载资源
问答
  • 讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么?... CSS中position和display理解 CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制...
    展开全文
  • 定义和用法 position 属性规定元素的定位类型。 说明 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它...

    position属性

    参考:http://www.w3school.com.cn/cssref/pr_class_position.asp

    定义和用法
    position 属性规定元素的定位类型。
    说明
    这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

    具体事例:
    html代码:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>position</title>
    	<link rel="stylesheet" type="text/css" href="position.css">
    </head>
    <body>
    	<div class="box" id="box1">One</div>
    	<div class="box" id="box2">Twe</div>
    	<div class="box" id="box3">Three</div>
    	<div class="box" id="box4">Four</div>
    </body>
    </html>
    

    css代码:

    		.box{
    			display: inline-block;
    			/*display: inline;*/
    			/*display: block;*/
    			
    			/*
    			block			此元素将显示为块级元素,此元素前后会带有换行符。
    			inline			此元素会被显示为内联元素,元素前后没有换行符。
    			inline-block	行内块元素。
    			*/
    			background: red;
    			width: 200px;
    			height: 200px;
    			color: rgb(255,255,255);
    		}
    		#box3{
    			left: 30px;
    			top: 30px;
    			background: blue;
    		}
    

    在未加position属性前运行结果:

    可见按照正常显示

    加上:position:value;
    value=

    • absolute
      生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
      结果:
      在这里插入图片描述

    • fixed
      生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

      为了证明该元素是相对于浏览器进行定位,我们加上了几段文字,而“Three”的位置却没有改变。

    • relative
      生成相对定位的元素,相对于其正常位置进行定位。
      在这里插入图片描述

    • static
      默认值。没有定位,元素出现在正常的流中

    • inherit
      规定应该从父元素继承 position 属性的值。

    展开全文
  • position属性absolute与relative 详解

    千次阅读 2012-12-13 15:48:57
    这里是两篇讲解position用法的文章,讲的很好,第一章讲的不太容易理解,但却是非常实用的,第二篇,讲的比较易懂,却讲的有点浅显,只要耐着性子学,总是会有明白的那一天的。position的这两个属性,却是不容易理解...

    这里是两篇讲解position用法的文章,讲的很好,第一章讲的不太容易理解,但却是非常实用的,第二篇,讲的比较易懂,却讲的有点浅显,只要耐着性子学,总是会有明白的那一天的。position的这两个属性,却是不容易理解和讲解的。

    NUM.1 

    详解定位与定位应用

    定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。
        定位的定义:
       在CSS中关于定位的内容是:position:relative | absolute | static | fixed
        static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
        relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
       absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
        fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

    CSS中定位的层叠分级:z-index: auto | namber;

    auto
    遵从其父对象的定位
    namber  无单位的整数值。可为负数
    定位的原理:

    1.可以位移的元素 (相对定位)

      在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,也可以通过margin来让元素产生位置移动。但事实上那并非是真实的位移,因为,那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left(下称TRBL,TRBL可以折分使用。)针对一个相对定位的元素所产生的。我们看下面的图:
    详解定位与定位应用
    我们看图中是一个相对定位的元素
    #first {
    width:200px;
    height: 50px;
    margin:25px;
    border:25px solid #333;
    padding:25px;
    position:relative;
    top: 50px;
    left: 50px;
    }
    而下方是一块默认定位的黑色区块
    #second {
    width:400px;
    height:75px;
    margin:0;
    border:0;
    padding:0;
    backgroud-color:#333;
    }
        我们看到这个处在文本流的区块被上面的相对定位挡住了一部分,这说明:“当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值。并且我们发现当相对定位元素进行位移后,表现内容已经脱离了文本流,只是在本文流中还为原来的相对对定位留下了原有的总宽与总高(内容的高度或是宽度加上 margin\border\padding的数值)。这说明在相对定位中,虽然表现区脱离了原来的文本流,但是在文本流中还还有此相对定位的老窩。这点要特别注意,因为在实际应用中如果相对定位的位移数值过大,那么原有的区域就会形成一块空白。
        并且我们注意,定位元素的坐标点是在margin值的左上边缘点,即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。
    2.可以在任意一个位置的元素(绝对定位)

        如上所述:相对定位只可以在文本流中进行位置的上下左右的移动,同样存在一定的局限性,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位,如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素,使之处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。看下图:
    详解定位与定位应用
       上图可知,文本流中的内容会顶替绝对定位无素的位置,一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中,定位元素将会跑到网页的左上角,因为那里是他们的被绝对定位后的坐标原点。
    3.被关联的绝对定位

       上面说的是单一的绝对定位,而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性,但是又希望绝对定位的坐标原点可以固定在网页中的某一个点,当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动,而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。

    虽然是如此,但是这个坐标原点却并不是父级的坐标原点,这是一个很奇怪的坐标位置。我们看一下模型图示:
    详解定位与定位应用

    我们看到,这个图中父级为黑灰色区块,子级为青色区块。父级是相对定位,子级是绝对定位。子级设置了顶部位移50个像素,左倾位移50个像素。那么我们看,子级的坐标原点并不是从父级的坐标原点位移50个像素,而是从父级块的padding左上边缘点为坐标起始点(即A 点)。而父级这里如果要产生位置移动,或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。

    这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话,相信看完对这里对定位的解释一定可以把定位使用得随心所欲。

    4.总在视线里的元素 (固定定位)

        position:fixed; 他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。


    原文地址:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html



    NUM2:

    解读absolute与relative 

    很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。

    Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

    一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。

    Relative,CSS中的写法是:position:relative;  他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

    有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

    文章出处:http://www.blueidea.com/tech/web/2006/4249.asp


    展开全文
  • <%@ taglib uri="/WEB-INF/c.tld" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ; charset=ISO-8859-1"> <title></title> ...
  • css属性position的运用

    2013-10-19 19:41:00
    随着web标准的规范化,网页的布局也随之千变万化。各种复杂漂亮有创意的页面布局冲 击这人们的视野,相比以前的table布局那...我主要说说position在现在网页运用的一些用法。 关于position用法或许很多前端童鞋...

    随着web标准的规范化,网页的布局也随之千变万化。各种复杂漂亮有创意的页面布局冲
    击这人们的视野,相比以前的table布局那就不是一等级的事儿。这个很大一部分功劳是css
    样式的引入。而这个多样性布局的主要有归功于position与float这两个css属性。今天,我
    不想讲这个属性布局页面;我主要说说position在现在网页运用中的一些用法。

    关于position的用法或许很多前端童鞋都会讲position的用法我早就会啦,还需要你在这 
    里著文解说。确实,对于position的用法大家都是经常用到,但是有些细节至少我还是挺模 
    糊不清的,以至于在布局的时候出现兼容问题。

    了解position的童鞋都知道这个属性有四个属性值

    1. static:这个是默认属性值,也就是该盒子按照标准流进行布局
    2. relative:称为相对定位,使用相对定位的盒子的位置常以标准流的排版方式为基础,然
      后使盒子相对于它在原来的标准位置偏移指定的距离。相对定位的盒子还在标准流中,它后
      面的盒子仍以标准方式对待它。

    3. absolute:绝对定位,盒子的位置以它的包含框为基础进行偏移。绝对定位的盒子从标准
      流中脱离。使其对其后的兄弟元素盒子的定位没有影响。

    4. fixed:固定定位,它和决定定位有些类似。只是它是以浏览器的窗口为基准进行定位,也就是当拖动浏览器的滚动条时,依然保持对象位置不变。

    下面具体举例说明

    1.static(静态定位)
    如图1-1 static是默认属性值设置top,left值是不起效果的。

    2.relative(相对定位)
    如图1-2

    2-1.relative布局实例
    如图1-3,在很多页面布局中都有这样的tab选项卡,选项卡菜单下面一条水平底线,我看过
    很多页面实现都是给菜单选项的父元素加个背景图来实现底线,这个方法好实现,但那是需
    要多一张图片,如果底线颜色变啦还得重新切图,很不灵活。

    在我的经验中,我利用position:relative,border-bottom就可以很灵活的实现图1-3的效
    果 ,而却不再需要麻烦的切图,更改下边线的颜色只需修改下边框的颜色即可,还减少一个
    图片的http请求。

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        * {margin:0;padding:0;}
        pre {width:580px; margin:0 auto; padding:10px; word-wrap:break-word; word-break:break-all; white-space:normal;background:#eee; }
        .posWrap {width:600px; height:40px; margin:20px auto; border-bottom:2px solid blue; background:red;}
        .relative {float:left; position:relative; left:0; top:0; width:100px; height:40px; margin-right:10px; line-height:40px; text-align:center; background:yellow;}
        .relative.on {margin-bottom:-2px; padding-bottom:2px;}
        </style>
        
    </head>
    <body>
    
    <div class="posWrap" id="div1">
        <span class="relative on">菜单一</span>
        <span class="relative">菜单二</span>
        <span class="relative">菜单三</span>
    </div>
    <pre>.relative {float:left; position:relative; left:0; top:0; width:100px; height:40px; margin-right:10px; line-height:40px; text-align:center; background:yellow;}<br/>.relative.on {margin-bottom:-2px; padding-bottom:2px;}</pre>
    
    </body>
    </html>

    3.absolute(绝对定位)
    绝对定位布局只需要注意两点

    1.当以父元素外框为定位基点的需要精准定位到右对齐的时候,外框的宽度最好不能出现基数,否则在ie6下就出现1px的偏差,如图1-4。

    正常

    2.当以父元素外框为定位基点的需要几贴父元素底部定位时,在ie6/7下要触发haslayout(这次测试没有重现出来,等下次布局遇到在补充)

    4.fixed(固定定位)
    固定定位是以浏览器窗口为基准定位,在现代浏览器都支持,唯有ie6不支持

    这次在项目的时候就有个js交互用到了position:fixed,运用这个的好处很多当浏览器滚动时,不需要用js去时时计算元素的top或bottom的的坐标值,而却元素还不是抖动的厉害影响用户体验。实例如下:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://s2.hqbcdn.com/??lib/jquery/jquery-1.7.2.min.js"></script>
        <style type="text/css">
        * {margin:0;padding:0;}
        pre {clear:both; width:580px; margin:0 auto; padding:10px; word-wrap:break-word; word-break:break-all; white-space:normal;background:#eee; }
        .posWrap {width:600px; margin:20px auto; background:red;}
        .con {width:600px; height:200em; background:blue;}
        #posDiv {height:40px;}
        .absolute {position:absolute;width:100px; height:40px; background:yellow;}
        .posFixed {position:fixed;}
        </style>
        
    </head>
    <body>
    
    <div class="posWrap" id="div1">
        <div class="con">content</div>
        <div id="posDiv"><div class="absolute">absolute</div></div>
    </div>
    <pre>.posWrap {position:relative; width:601px;}<br/>.absolute {position:absolute; right:0;}</pre>
    <script type="text/javascript">
    $(function(){
        var $posDiv = $('#posDiv');
        var $posDivMove = $('.absolute', $posDiv);
        var iMaxTop = $posDiv.offset().top;
        var iTop;
        
        $(window).bind('scroll resize', function(){
            var iHeight = $(window).height() - $posDivMove.height();
            iTop = $(window).scrollTop() + $(window).height() - $posDivMove.height();
    
            if (iTop <= iMaxTop) {
                if ($.browser.msie && ($.browser.version==6.0) && !$.support.style) {
                    $posDivMove.css({'top': iTop + 'px'});
                }else{
                    $posDivMove.addClass('posFixed').css({'top': iHeight + 'px'});
                }
            }else {
                $posDivMove.removeClass('posFixed').css({'top': 'auto'});
            }
        })
    })
    </script>
    </body>
    </html>

    转载于:https://www.cnblogs.com/qiheng/p/3378216.html

    展开全文
  • web前端重点题

    2020-05-26 14:20:44
    4. position 和 display 的取值和各自的意思和用法 5. 样式的层级关系,选择器优先级,样式冲突,以及抽离样式模块怎么写,说出思路,有无实践经验 6. css3动画效果属性,canvas、svg的区别,CSS3新增伪类举例 ...
  • position 和 display 的取值和各自的意思和用法 样式的层级关系,选择器优先级,样式冲突,以及抽离样式模块怎么写,说出思路,有无实践经验 css3动画效果属性,canvas、svg的区别,CSS3新增伪类举例 ...
  • DAY2补充3,介绍HTML定位的所有类型和相关用法。 博主在浮动篇简单提到过定位,这里更加详细的介绍。 2 定位 2.1 什么是定位? 定位元素框相对于其正常位置应该出现的位置 定位分类 1)普通流定位(文档流):...
  • 通用表分页器 一种使用苗条通用挤压表的苗条分页器。 Svelte组件: import GenericTablePager from 'svelte-generic-table-pager' 安装 npm install svelte-generic-table-pager ... // position in myObjectArray
  • 类比web开发的事件,就好比web开发的click。在web开发,浏览器内部实现了click事件,我们可以通过<code>onclick或者<code>addEventListener('click',callback)来绑定<code>click...
  • 详细介绍及用法请看我写的另一篇文章《重新认识 WEB 开发与 RN 开发 position、display 样式的用法及差异》的display部分。 2.css如何实现垂直居中? 这是前端经典的面试题。css实现垂直居中的方法有很多,...
  • JAVA6动态编译的问题

    2009-04-15 12:25:48
    用法:javac <选项> <源文件> 其中,可能的选项包括: -g 生成所有调试信息 -g:none 不生成任何调试信息 -g:{lines,vars,source} 只生成某些调试信息 -nowarn 不生成任何警告 -verbose 输出有关编译器正在执行...
  • 我们招聘Web前端工程师。 为什么会有这些题目?这些题目代表了我看重的技能和方向,如果你觉得自己有能力有才华,但是苦于自己没有大公司经历简历被筛掉,请试试发这些题目的答案给我。 为...
  • jQuery详细教程

    2013-04-25 14:16:42
    jQuery详细教程,讲解很透彻, ...<p>W3School - 领先的 Web 技术教程站点 在 W3School,你可以找到你所需要的所有网站建设教程。 请点击这里 jQuery fadeTo() 演示简单的 jQuery fadeTo() 函数。 ...
  • Write length bytes to the file from the ArrayBuffer buffer at byte position position (wrapper to the libc fread). getline() 返回文件的下一行,假设为UTF-8编码,不包括尾随换行符。 getByte() 返回文件...
  • 04 jqueryCSS操作之offsets,position以及scrolltop 05 jquery事件绑定与事件委托 06 jquery动画效果 07 jquery扩展与插件 08 jquery扩展补充 09 本周作业轮播图以及思路 第45章 轮播图片css部分 轮播图片js部分 ...
  • 另外对于bind的一些用法和模拟bind可以看下我的这篇文章<a href="https://github.com/Aaaaaaaty/Blog/issues/1">Javascript之bind</a></p> 有关this的文章有兴趣的同学可以去读一读《你不知道的Javascript》</a>&#...
  • Oracle事例

    2007-08-26 10:35:53
    14、查询从多少行到多少行的记录(可以用在web开发的分页显示) select * from ( select rownum row_id,b.* from (select a.* from sys_oper a) b ) where row_id between 15 and 20 15、对公共授予访问权 ...
  • 不存在web中样式的继承。 刚开始接触的同学就类比于react中扯的,一切皆为组件吧,其实widget是对页面UI的一种描述。他功能类有点似于android中的xml,react中的jsx。widget在渲染的时候会转化成...
  • 由于目前高校基本尚未开JavaScript的相关课程,目前jQuery的学习,使用,研究都仅限于在职Web程序员之间。 用jq的前提,首先要引用一个有jq的文件 [removed][removed] 这个是jquery官方最新的地址。可用在自己网站...
  • 首页请求数据之后,根据热门度返回多个数据,将数据存储到list集合,并且将它转换为JSON格式数据,返回到页面,页面解析数据并且显示。  商场则负责显示所有的商品数据,实现侧边栏点击指定的类别之后,显示对应...
  • Java学习笔记-个人整理的

    热门讨论 2012-12-19 09:57:07
    {2.8}框架移动的小球}{59}{section.2.8} {2.9}抽象与接口}{59}{section.2.9} {2.10}访问控制}{60}{section.2.10} {2.10.1}类的属性}{60}{subsection.2.10.1} {2.10.2}类的方法}{61}{subsection.2.10.2} {...

空空如也

空空如也

1 2
收藏数 23
精华内容 9
关键字:

web中position用法