精华内容
下载资源
问答
  • 想必大家对html中position属性并不陌生吧,使用它可以完成普通标签完成不了的任务,下面有个不错的示例,大家可以参考下昨天刚学了html的一些内容,就迫不及待的想做个京东上面的搜索条,结果做是做出来了,不过在做...

    想必大家对html中position属性并不陌生吧,使用它可以完成普通标签完成不了的任务,下面有个不错的示例,大家可以参考下

    昨天刚学了html的一些内容,就迫不及待的想做个京东上面的搜索条,结果做是做出来了,不过在做那个购物车结算的时候,有个上面显示的数字不知道该怎么加了,如果想让数字跟着购物车一起动的话,就必须将它们两个定位在一起,定位的话肯定就需要position,首先将数字的p的position设置为absolute,有一种层的感觉,因为此时的数字的position的父标记是body所以设置top和left的时候也可以设置到和购物车想要的位置,不过将购物车的margin改变的话,两个无法一起动,所以就把购物车的position设置成为relative,这样数字的position的父标记就变成了购物车,无论购物车的margin怎么调,数字都会跟着它一起动了.....

    代码如下:

    day03.html

    /*首先写一个position的p*/

    #car{

    width:150px;height:30px;

    background: #999999;

    color:white;text-align: center;

    line-height: 30px;margin: 232px 300px;

    border:1px solid black;position: relative;

    }

    #num{

    width:20px;height:20px;background: red;

    color:white;text-aligh:center;

    line-height:20px;position: absolute;

    top:-15px;left:25px;

    }

    去购物车付款

    0

    更多html中position的用法使用介绍相关文章请关注PHP中文网!

    展开全文
  • Web前端基础(CSS position的正确用法position属性的relative以及absolute的区别是什么? 任何元素的默认position的属性值都为static(静态),但我们在布局的时候也会经常用到relative(相对)以及absolute...

    Web前端基础(CSS position的正确用法)

    position属性的relative以及absolute的区别是什么?

    任何元素的默认position的属性值都为static(静态),但我们在布局的时候也会经常用到relative(相对)以及absolute(绝对)这两种属性。

    再分别介绍两种属性之前,我们一定要记住一个重要结论:如果用position来进行布局,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素padding的属性影响,当然也可以用relative,不过到时候计算的时候不要忘记padding的值。

    【absolute:绝对定位】
    默认参照浏览器左上角,配合TOP、RIGHT、BOTTOM、LEFT(以下简称TRBL)进行定位,具有以下属性:
    (1)无TRBL的情况下,参照父级左上角;无父级,参照浏览器左上角;无父级元素,但存在文本,参照最后最后一个文字的右上角为原点但是不断开文字,覆盖与上方。
    (2)如果设定TRBL,并且父级没有position属性(不论是absolute还是relative),都是默认以浏览器左上角开始定位,位置由TRBL决定。
    (3)如果设定TRBL,并且父级有position属性(不论是absolute还是relative),默认以父级左上角为原点开始定位,位置由TRBL决定。
    以上三点我们就可以总结出:若想使用absolute进行定位,那我们就要明确两点:
    第一:设定TRBL

    第二:父级设定position属性

    【relative:相对定位】
    默认参照父级原始点为原始点;如果无父级,以文本的上一个元素的底部为原始点,配合TRBL进行定位;当父级内有padding属性时,参照父级内容区的原始点进行定位。
    (1)不存在TRBL,参照父级左上角;没有腹肌,参照浏览器左上角;没有腹肌元素,但是存在文本,则以文本的底部为原始点进行定位并将文字断开。
    (2)设定TRBL,并且父级没有设定position属性,以父级左上角为原点进行定位
    (3)设定TRBL,并且父级设定position属性,以父级左上角为原点进行定位,但是如果父级有padding属性,那么以内容区域的左上角为原点进行定位。

    综上所述,relative均以父级左上角进行定位,但是受padding的影响。

    这样,我们就可以得知为什么要选用relative定位父级元素,absolute定位内部元素。因为我们布局时用relative后,就不只是用float布局页面了,还可以用TRBL进行布局。但是如果用absolute来布局页面,搜有的DIV都相对于浏览器的左上角定位,这样适配性会大大下降,用户体验度很低。所以只能用与将某个元素定位于属性为absolute的元素的内部的某个位置。

    展开全文
  • 怕忘记了CSS中position的absolute和relative用法 CSS2.0的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅。下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明...

    https://www.cnblogs.com/cdgxa/p/4600242.html


    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅。下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下

    CSS2.0中position主要用于HTML元素的定位,在实际设计中还是非常有用的。但是对于学习者来说都会遇到相对定位和绝对定位到底如何使用,非常打脑壳

    不管再咋个打脑壳,大家首要的还是记住position的几个属性值

    • static: HTML元素的默认定位方式
    • absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
    • relative: 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
    • fixed: 元素的位置相对于浏览器窗口是固定位置, 即使窗口是滚动的它也不会移动

    因为static和fixed比较简单,所以下面的案例我们来介绍一个relative和absolute这个两个属性。先看一个案例截图

    上面截图由3个div组成,外层div名称为scroll,第2个div的名称为sub,第3个div的名称为ssub。现在我就来告诉大家如何使用position中absolute和relative

    记住如下的口诀

    • 绝对定位(absolute)位置是相对最近已经定位的父元素,如果父元素本身没有使用position定位,则相对于文档(html)定位
    • 绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位

    案例代码

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.scroll /*父级元素,注意使用了relative*/
    {
    background-color:#00FFFF;
    width:350px;
    height:350px;
    position: relative;
    }
    div.sub { /*第2个子级元素*/
    width:200px;
    height: 200px;
    border: 1px solid red;
    position: absolute;
    left: 10px;
    top: 10px;
    }
    div.ssub{ /*最里层的元素*/
    width:100px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    left: 10px;
    top: 10px;
    }
    </style>
    </head>
    
    <body>
    <div class="scroll">
      <div class="sub">
        <div class="ssub"></div>
      </div>
    </div>
    </body>
    </html>
    复制代码

    CSS定位总结(来自divcss5官方网站的总结,本人觉得非常好,就记下来)。多谢divccs5,http://www.divcss5.com/rumen/r403.shtml

    通常我们使用position:absolute;position:relative进行绝对定位布局,通过CSS进行定义定位,DIV布局HTML,注意什么地方使用position:relative,什么地方使用position:absolute进行定位,同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative,而直接使用position:absolute绝对定位,这个时候将会以body标签为父级,使用position:absolute定义对象无论位于DIV多少层结构,都将会被拖出以<body>为父级(参考级)进行绝对定位。绝对定位非常好用,但切记不要滥用,什么地方都用,这样有时会懒得计算距离上、下、左、右间距,同时可能会造成CSS代码臃肿


    在绝对定位时候我们可以使用css z-index定义css层重叠顺序。同时left、right、bottom、top的数值,可以使用(Photoshop)PS切片工具获取准确的数值。


    展开全文
  • background-position : position || position 取值: length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  position : top | center | bottom | left | center | righ

    语法:
    background-position : length || length
    background-position : position || position
    取值:
    length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 
    position  : top | center | bottom | left | center | right

    说明:
    设置或检索对象的背景图像位置。必须先指定 background-image 属性。
    该属性定位不受对象的补丁属性( padding )设置影响。
    默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
    如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
    如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
    对应的脚本特性为 backgroundPosition。

    注:本文中使用的图片大小为 300px*120px,为了能很清晰的表达图形的哪部分被隐藏了,按照图片的大小平均分成了9等份。同时背景图片容器区域绘制出绿色边框清晰显示容器的范围。
    1、background-position:0 0;
    背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。例如:

        .container{
            width:300px;
            height:150px;
            background:transparent url(bg.jpg) no-repeat scroll 0 0;
            border:5px solid green;
        }

    效果如下图1:

                                            图 1

    2、该属性定位不受对象的补丁属性( padding )设置影响。

    例如,我们给容器元素增加padding值,背景图片的左上角还是与容器元素的左上角对齐。在此处只是影响到了容器元素的高度和宽度。

        .container{
            width:300px;
            height:150px;
            background:transparent url(bg.jpg) no-repeat scroll 0 0;
            border:5px solid green;
            padding:50px;
        }

    效果如图2:

                                                       图 2

    3、background-position:-70px -40px;

    图片以容器左上角为参考向左偏移70px,向上偏移 40px,示例:

        .container{
            width:300px;
            height:150px;
            background:transparent url(bg.jpg) no-repeat scroll -70px -40px;
            border:5px solid green;
        }

    效果如图3:

                                      图 3

    4、background-position:70px 40px;

    图片以容器左上角为参考向右偏移70px,向下偏移 40px,示例:

        .container{
            width:300px;
            height:150px;
            background:transparent url(bg.jpg) no-repeat scroll 70px 40px;
            border:5px solid green;
        }

    效果如图4:

                                       图 4

    5、background-position:50% 50%;

    图片水平和垂直居中。与 background-position:center center;效果等同。

    等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
    等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

     例如: .container{
            width:300px;
            height:150px;
            background:transparent url(bg.jpg) no-repeat scroll 50% 50%;
            border:5px solid green;
        }

    其x=(300-210)*50%=45px;

    y=(150-120)*50%=15px;

    效果如图5:

                                         图 5

    由于超出部分别往两端延伸,所以我们可以先制作一张宽度足够宽图片设置水平值为50%,这样可以用来适应不同的浏览器,使得图片水平充满浏览器窗口并且居中。替代margin:50 auto的功能。

    6、background-position:-50% -50%;

    等同于x:-{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
    等同于y:-{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

    此设置使背景图片居中显示。

        .container{
            width:300px;
            height:150px;
            background:transparent url(bg.jpg) no-repeat scroll -50% -50%;
            border:5px solid green;
        }

    效果如图6:

                                         图 6

    7、background-position:100% 100%;

    图片处于容器元素的右下角,与 background-position:right bottom;效果等同。

    示例:

        .container{
            width:300px;
            height:150px;
            background:transparent url(bg.jpg) no-repeat scroll 100% 100%;
            border:5px solid green;
        }

    效果如图7:

                                        图 7

    展开全文
  • HTML之Position用法

    2014-02-12 11:18:54
    之前工作都是Unix上的C++,最近开始转做web开发,忽然发现web开发需要的技术又多又杂,例如,js,css,html等等。搞得头大,最新学习html,在position这个地方搞蒙了。在网上找了一篇关于position文章,说得很不错,...
  • css 之position用法详解

    2015-02-01 21:55:00
    css 之position用法详解: http://www.jb51.net/web/77495.html 转载于:https://www.cnblogs.com/andydao/p/4266178.html
  • DIV布局属性中position属性的四大用法

    万次阅读 2012-07-09 18:53:54
    正确的使用DIV布局属性之position属性 Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局Position发挥着非常重要的作用,很多容器的定位是用Position来完成。 Position属性有四个可选值...
  • position定位方式 1.position:static 无定位(默认值) (1).元素出现在正常文档流(top、right、left、bottom等属性不使用) (2).当没有对一个元素指定定位时,使用static(默认),也就是按照文档的流式(flow)...
  • 讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么?... CSS中position和display理解 CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制...
  • 简介 ...在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position还说了下面这三个值: /* 全局值 */ position: inherit; position: initial; position: unset; 估计大部分都没有用过position
  • 在移动web中使用position:fixed,会踩到很多坑,在我之前的一篇文章《移动端web页面使用position:fixed问题总结》已经总结了很多bug,但是在后续的开发有关fixed的未知bug越来越多,我也在尽量的寻找解决方案。...
  • Web 开发出于多种原因,我们需要隐藏元素。例如,一个按钮应该在移动可见,而在桌面视口隐藏。或者,在移动设备上隐藏但要在桌面上显示的导航元素。隐藏元素时有三种不同的状态:元素完...
  • css定位属性position用法

    千次阅读 2015-06-26 17:24:28
    css属性position的简单探讨。
  • 在css实现position定位的时候,absolute绝对定位是相对于文档流位置,在此文中,我来说一下助图片组合的方法,那么排在它后面的的内容会自动进位,进而可被其覆盖。绝对定位是有效而强大的。 为什么这么说呢? ...
  • Position属性之relative用法

    万次阅读 2017-11-24 22:38:34
    Position属性之relative用法 投稿:mrr 字体:[增加 减小] 类型:转载 时间:2015-12-14 我要评论 Relative是position的一个属性,是相对定位,通过本篇文章给大家介绍Position属性之relative用法,对...
  • CSS position属性用法

    2011-03-03 02:14:00
    绝对定位:position: absolute; 有如下两种情况 1,没有设定 Top、Right、Bottom、Left 的情况,默认依据父级的“内容区域原始点”为原始点。 2,有设定 Top、Right、Bottom、Left 的情况,这里又分了两种情况...
  • web开发常常会有一些代码需要多个页面使用,比如 banner nav导航 还有 footer等. ASP.NET开发 有母版页的说法,也就是写一些通用的模版页,然后其他页面可以引用。  jsp 当然也有这样的用法 也就是...
  • 定义一种方法,该方法使用if/else语句形式的控制流来操作数组。 概述 我们已经有显示游戏板的方法(映射到数组的索引)和要求用户输入并相应地填写游戏板上位置的方法。但是,在我们的程序可以填写董事会职位之前,...
  • Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局Position发挥着...我们下面来共同学习它们的不同的用法,在学习我们应该去思考在什么布局情况下,应该使用它们其中的哪一种。  更多关于Pos
  • Positioning elements with CSS in web development isn’t as easy as it seems. Things can get quickly complicated as your project gets bigger and without having a good understanding of how CSS deals ...
  • web前端面试常见问题二  ------css布局(position)  前言:博主我今年大三,web前端学了也有小半年啦,因为大四没课啦,所以已经开始找实习,面试了很多大大小小的公司,有失败也有成功。接下来我将和大家分享...
  • 写在前面 如果你有现在使用 Springfox 的经历的话,可能就有对 api 进行分组以及排序等需求,而Springfox(应当说是Swagger更确切)...那就是使用ApiOperation注解的position方法,但是很不幸的是该方法已经标记为过...
  • ios 系统 position: fixed 界面滚动问题 问题描述 某个组件,设置了部分元素 position: fixed 后,在 iOS 设备滚动卡顿,部分内容显示卡顿。当界面停止滚动,内容显示正常。 在桌面浏览器测试正常,在安卓设备...
  • 浅谈Java web request的setAttribute()用法

    万次阅读 多人点赞 2016-04-25 17:06:38
    而此时使用RequestDispatcher接口的forward()方法则能够得到request的对象了,这是因为后者并不是使用客户端浏览器进行重定向的,从函数的名字就可以看出,RequestDispatcher.forward()就是从服务器端进行任务转发...
  • 错误:页面解析字符串报错,使用JSON.parse() 下面是解析内容 解决方法:解决方法就是重启tomcat就好了 本来这个博客只是用来记录错误的,然后一直没有更新,有人评论才被发现没有写上解决方法,实在抱歉 ....
  • position:fixed 与IE窗口定位

    千次阅读 2013-01-23 10:31:23
    大家都知道在CSSposition:fixed能够使指定元素定位在窗口指定位置,但在IE不支持这个属性,FUCK!...使用CSS的expression方法 CSS代码如下: 使元素固定在浏览器的顶部: #top{ position:absolu
  • WebAPI中使用Autofac (过滤器的注册)

    千次阅读 2018-06-25 21:00:06
    第一步:在webAPI安装 Autofac.WebApi2 。不要错误的安装Autofac.Mvc5,也不要错误的安装Autofac.WebApi,因为Autofac.WebApi是给webapi1的,否则会报错:重写成员“Autofac.Integration.WebApi....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,073
精华内容 32,029
关键字:

web中position用法