绝对定位

说说昨天学到的绝对定位和相对定位

由 老子叫甜甜 提交于 2020-02-29 12:57:12
前一段时间对于绝对定位和相对定位一直处于模糊状态，但是昨天在新浪上看到一篇文章，讲的很详细，所以就很开心的把它收藏了。 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; 1.可以位移的元素 （相对定位） 我们看图中是一个相对定位的元素 #first { width:200px; height: 50px; margin:25px; border:25px solid #333; padding:25px;

CSS中的position定位

由 点点圈 提交于 2020-02-28 16:03:23
position的属性值：static,absolute,relative,fixed. 1 static ：position的默认属性，元素出现在正常的流中（忽略top，bottom，left，right，z-index声明） 。 通常设置position:static;的情况都是取消定位的 2 r elative :相对定位,这个 相对指的是元素的正常位置 ,就是相对于你不加position:relative;的情况进行了如何的偏移.加完这个属性可以通过top,left,bottom,right进行位移设置. 如果没有设置这些位移仅仅设置position:relative;那么元素位置不会有任何变化. 注意：设置为relative的元素,它默认占有的空间还会继续被该元素占有,同时它不会影响其他相邻元素. 3 absolute 是绝对定位， 相对于static定位以外的第一个父元素进行定位 。绝对定位元素会脱离文档流,整个文档会当做它不存在一样去排版,并且它原先所占有的空间也不会存在. 只有在绝对定位的任何祖先元素都没有设置position值为relative或absolute的情况下,它才会比照html进行定位. 如果一个元素被绝对定位,那么先在离自己最近的元素中看有没有相对定位的元素,如果有则以此为参照物.如果没有则追溯祖先元素中有没有相对定位的元素. 4 fixed

CSS各种定位详解

由 ↘锁芯ラ 提交于 2020-02-28 12:04:42
1.定位的专业解释 　　(1)语法 　　position:static|absolute|fixed|relative 　　(2)说明 　　从上面语法可以看出，定位的方法有很多种，它们分别是静态(static)，绝对定位(absolute)，固定(fixed)，相对定位 (relative)。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位(absolute)、相对定位(relative)。 　　绝对定位(absolute)：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接 近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body对象左上角作为参考进行定 位。绝对定位对象可层叠，层叠顺序可通过z-index属性控制，z-index值为无单位的整数，大的在最上面，可以有负值(目前负值FF不支持)。 　　相对定位(relative)：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。 2.定位的形象解释 　　我先来架设一个虚拟的场景：有一个矩形的房间，里面还有一个水桶装了些水，水里还浸泡着一个西瓜，这个房间半空中还有不少的钩子用于挂东西用。

z-index不适用于固定定位

由 余生颓废 提交于 2020-02-28 11:21:48
我有一个具有默认定位的 div （即 position:static ）和一个具有 fixed 位置的 div 。 如果我设置元素的z索引，似乎不可能使固定元素落后于静态元素。 #over { width: 600px; z-index: 10; } #under { position: fixed; top: 5px; width: 420px; left: 20px; border: 1px solid; height: 10%; background: #fff; z-index: 1; } <!DOCTYPE html> <html> <body> <div id="over"> Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div> <div id="under"> </div> </body> </html> 或者在这里的jsfiddle： http ： //jsfiddle.net/mhFxf/ 我可以通过在静态元素上使用 position:absolute 来解决这个问题，但是有人能告诉我 为什么 会发生这种情况吗？ （似乎有一个类似的问题，这个问题，（ 固定位置打破了z-index ）但它没有一个令人满意的答案

CSS实现水平垂直居中

由 懵懂的女人 提交于 2020-02-27 22:01:29
<div class="wrapper"> <div class="content"></div> </div> 一、水平居中 行内元素：对其父元素应用text-align:center属性 .wrapper{ text-align: center; } 块级元素：对自身应用margin:auto属性 .content{ width: 200px; margin: 0 auto; } 二、水平垂直居中 元素固定尺寸 一般 .content{ width: 400px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -200px; } 使用calc() .content{ width: 400px; height: 200px; position: absolute; top: calc(50% - 100px); left: calc(50% - 200px); } 元素尺寸由内容决定 绝对定位 .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } [注意] 当居中元素的高度超过了视口，则它的顶部会被视口裁切掉 在某些浏览器中

垂直居中的几种方式 + css文本框文字溢出显示省略号

由 允我心安 提交于 2020-02-27 02:46:55
1 对于最最基础的单行文本，要想实现垂直方向居中，很简单的方法就是让文本的行高等于父级元素的高度。这个仅适用于让当行文本垂直居中的情况，多行文本就不适用了。 father{ width:500px; height:500px } child{ line-height:500px; } 2 如果是图片的话，直接设置img的属性vertical-align: middle;前提是需要设置父级元素为块级元素并且设置高度。 3 用absolute绝对定位，分别父级元素和子元素的position为 HTML： <div class="out"> <div class="in"> 节点内容节点内容 </div> </div> .out {position: relative;} .in { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; } 这个只适玉元素本身有规定的高度和宽度，但是实际应用中是要根据内容才能确定高度，所以就有了升级版 4 用absolute定位，并且可不限制高度。很简单，借助强大的CSS3中的translate() 变形函数。具体原理是translate() 属性值的百分比是元素本身的宽高为基准进行计算的

CSS实现定位元素居中的方法

由 孤街浪徒 提交于 2020-02-26 23:38:19
绝对定位元素的居中实现 　　如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。 　　兼容性不错的主流用法是： 　　CSS Code复制内容到剪贴板 　　.element { 　　width: 600px; height: 400px; 　　position: absolute; left: 50%; top: 50%; 　　margin-top: -200px; /* 高度的一半 */ 　　margin-left: -300px; /* 宽度的一半 */ 　　} 　　但，这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。 新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。 　　CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，于是，我们可以： 　　CSS Code复制内容到剪贴板 　　.element { 　　width: 600px; height: 400px; 　　position: absolute; left: 50%; top: 50%; 　　transform:

文本省略号的css样式实现

由 巧了我就是萌 提交于 2020-02-26 22:58:30
-webkit-line-clamp 是一个 不规范的属性（ unsupported WebKit property ），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow ，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <p style=" overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; "> // static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right

css 保持宽高比缩放

由 半腔热情 提交于 2020-02-26 13:33:09
参考 关于html：用CSS保持div的宽高比 需求简介: 在大的div中放九个小div, 小div需要保持4:3的宽高比, 小div中会有图片, 图片按照4:3拉伸 下图效果是div1:1 , 图片宽度100%, 高度自适应 思路 1, 使用padding-bottom / padding-top 计算值时使用父元素的宽度来生成宽高比固定的div, 但此时该div高度为0 值 描述 length 规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。 % 定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。 inherit 规定应该从父元素继承下内边距。 2, 使用绝对定位拉伸子元素宽高 3, 对于图片进行拉伸 <template> <div class="box-wrap"> <div v-for="i in 9" class="box"> <div class="img-wrap"> <img src="./img.jpg" alt="" class="img"> </div> </div> </div> </template> <script> export default { name: "app" } </script> <style scoped> .box-wrap { border: 1px solid black;

相对定位/绝对定位/固定定位/粘滞定位

由 a 夏天 提交于 2020-02-26 12:48:20
1.定位的概念： 定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置，使用position属性来设置定位。 可选值： static 默认值，元素是静止的没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位 2.偏移量的概念： 当元素开启了定位以后，可以通过偏移量来设置元素的位置。 top: 定位元素和定位位置上边的距离(top值越大，定位元素越向下移动) bottom: 定位元素和定位位置下边的距离(bottom值越大，定位元素越向上移动) 定位元素垂直方向的位置由top和bottom两个属性来控制 left:定位元素和定位位置的左侧距离(left越大元素越靠右) right:定位元素和定位位置的右侧距离 定位元素水平方向的位置由left和right两个属性控制( right越大元素越靠左），通常我们使用元素的top和left值去定位元素的位置。 注意和margin的区别:1.margin-top会改变页面布局;而top会覆盖元素，不会改变页面的布局。2.四个方向的偏移都是移动自身，而不会跟margin-bottom/right一样是其他元素在移动 3.相对定位： position：relative开启了元素的相对定位 3.1当开启元素的相对定位之后
订阅 绝对定位