绝对定位 | 易学教程

CSS Position 定位属性

阅读更多关于 CSS Position 定位属性

　　本篇文章主要介绍元素的Position属性，此属性可以设置元素在页面的定位方式。目录 1. 介绍 position ：介绍position的值以及辅助属性。 2. position 定位方式：介绍position的四种定位方式：绝对、相对、固定、默认。 3. 总结 position ：以示例的方式展示position。 1. 介绍 1.1 说明 Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。 1.2 主要的值 ① absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。 ② relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 ③ fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。 ④ static ：默认值；默认布局。 1.3 辅助属性 position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)： ① left ：表示向元素的左边插入多少像素，使元素向右移动多少像素。 ② right ：表示向元素的右边插入多少像素

DIV+CSS布局

阅读更多关于 DIV+CSS布局

1.div和span （1）div和span在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式（2）div和span的区别在于，span是内联元素，div是块级元素 2.盒模型 margin 盒子外边距 padding 盒子内边距 border 盒子边框宽度 width 盒子宽度 height 盒子高度 3.布局相关的属性（1）position定位方式 relative 正常定位 absolute 根据父元素进行定位 fixed 根据浏览器窗口进行定位 static 没有定位 inherit 继承（2）定位 left、right、top、bottom离页面顶点的距离（3）z-index层覆盖先后顺序（优先级）代码示例： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Div+CSS布局（布局相关的属性）</title> 6 <style type="text/css"> 7 body{ 8 padding: 0px; 9 margin:0; 10 } 11 12 .div{ 13 width:300px; 14 height:300px; 15 background-color: green; 16 position: relative; 17 left:10px

CSS的margin属性：详解margin属性

阅读更多关于 CSS的margin属性：详解margin属性

在网上看到的一篇文章，说的比较全面。原文地址：http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？ margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。 Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南 Margin的特性 margin始终是透明的。 margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。外边距的 margin-width 的值类型有：auto | length | percentage

浅谈块元素绝对定位的margin属性

阅读更多关于浅谈块元素绝对定位的margin属性

对于div的绝对定位一直以为margin属性是无效的，只是通过top，left，bottom，right定位，然而今天的却发现不是这样的，于是对其做了些实验：使用的HTML原始测试文件： Html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns= "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> < title >test </ title > </ head > < body > < div class= "wrapper" > < div class= "box" > < div class= "bottom" > </ div > </ div > </ div > </ body > </ html > 原始的测试css： Html代码 < style > *{ margin:0; padding:0; } .wrapper{ width:400px; overflow

CSS定位

阅读更多关于 CSS定位

本系列文章的绝大多数内容都来自 w3cschool , 再次感谢。 CSS定位的基本思想很简单，它允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。块级元素和行内元素块级元素就像是一个四方块，它可以放在页面的任意位置，它类似于一个段落，前后各有一个换行符(非显示添加的)。像<h1>,<p>,<div>,<table>,<ul>等都是块级元素，如果不加特殊定义，它们前后的内容和它们都不在同一行。行内元素也叫内联元素，只能出现在行内，除非在他们后面人为加上换行符，否则它们后面的内容和它们仍然是在同一行里。像<a>,<strong>,<span>,<img>等都是行内元素。可以通过display属性改变一个元素的显示属性，它有多个备选值： none, 该元素不会显示，在页面上也不占有空间 block，让元素以块级元素形式显示 inline，默认值，让元素以行内元素的形式显示其他但是当把一些文本添加到一个块级元素(比如div)的开头，即使没有进行显式定义，也会创建块级元素： <div>some text<p>Some more text.</p></div> 上述代码中的"some text"因为出现在<div>元素的开头，又没有其他定义，所以它就是一个块级元素，只是它不与任何专门定义的元素关联，也就没有办法对其单独使用样式

关于登录页面的css样式总结，包括文字，输入框样式的一些基础美化（8）

阅读更多关于关于登录页面的css样式总结，包括文字，输入框样式的一些基础美化（8）

有图有真相功能介绍：第一：具有相当的适应性，平板，移动端，pc端第二：背景加格子，还算漂亮，第三：登录，滑入时呈现动画效果总结：第一：输入框，一般去掉border:none;原装相当丑，尤其是给予圆角，看到更加明显，其次针对需要设置outline:none；选中时的状态，适当的padding和margin,看起来舒适第二：针对文字，调整间距，大小，粗细，位置，第三：关于适应性，增加@media ,重点是包裹输入框的宽度，第四：页面铺满整屏幕，用绝对定位加top:0;bottom:0; 详细代码如下：一些注释，保留在，方便查看复习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> body { padding: 0; margin: 0; } * { box-sizing: border-box; /*直接决定向你内扩展,在默认情况下是不改变宽度,让元素膨胀变大*/ }

绝对定位元素的最大宽度受父元素宽度影响失效

阅读更多关于绝对定位元素的最大宽度受父元素宽度影响失效

代码 .box { position: relative; margin: 50px; width: 150px; height: 200px; background-color: #999; } .tooltip { position: absolute; top: 50px; left: 200px; max-width: 200px; background-color: #eee; } <div class="box"> <div class="tooltip"> 台风路径实时发布系统是由浙江省水利厅、浙江省水利信息管理中心主办的台风信息发布系统,系统提供最新最全的台风信息和台风路径,可及时准确地提供台风的实时信息、预报信息和历史信息,系统同... </div> </div> 如上图所示，我为tooltip元素加了max-width，但并没有生效。解决方法： .tooltip { position: absolute; top: 50px; left: 200px; width: 1366px; max-width: 200px; background-color: #eee; } 为tooltip元素加上了足够用的宽度 width: 1366px; ，最大宽度生效了。来源： https://blog.csdn.net/zbailing/article/details

CSS元素的重叠方式

阅读更多关于 CSS元素的重叠方式

CSS元素的重叠方式负margin: 给元素设置负margin使其移动后原来的位置是不会保留的负margin可以让元素的占用空间变小后面的元素可以覆盖当前的元素 (这里有两个相同大小的div 宽高都是100px (如图一) 当我们给上面类名为div的div设置了-margin-bottom之后 (见图二) 我们发现下面的元素覆盖了-margin的位置) 图一: 浮动原来的位置不保留并且可以遮盖住其他元素脱离页面流定位相对定位：原来位置保留并且不会挤到其他元素，只会重叠绝对定位：不保留原来位置脱离页面流来源： https://blog.csdn.net/ron_wang_/article/details/99414915

css如何实现鼠标移至图片上显示遮罩层及文字

阅读更多关于 css如何实现鼠标移至图片上显示遮罩层及文字

css如何实现鼠标移至图片上显示遮罩层及文字问题：一张图片当鼠标移动到上方时，会显示一个遮罩层，并且显示一些提示文字 html: < div class = "contentimg" > < span class = "img_content" > < a href = "http://www.eltran.cc/" target = "view_frame" > < img src = "./assets/img/图片路径.jpg" alt = "" > < span class = "mask" > 河北亚创天然气股份有限公司 </ span > </ a > </ span > </ div > css: 其中要注意的是img_content样式里定义了position: relative;这个主要是为了让我们的遮罩层做绝对定位做准备的。 .contentimg img { width : 235 px ; height : 100 px ; } .contentimg .img_content { position : relative ; padding : 0 ; width : 235 px ; height : 100 px ; } .contentimg .img_content .mask { position : absolute ; top : - 36

前端之CSS重点知识

阅读更多关于前端之CSS重点知识

字体属性字体大小:font_size <-! rgba调整透明度-></-!> <div style="background: rgba(125,125,111,0.5)">aaaaa</div> 文字属性 text-align 元素中的文本居中对齐:text-align:center; 元素中的文本右对齐:text-align:right; 元素中的文本左对齐:text-align:left; 元素中的文本两端对齐:text-align:justify; text-decoration 默认标准文本(a标签去除下划线):text-decoration:none 定义文本下的一条线:text-decoration:underline 定义文本上的一条线:text-decoration:overline 定义穿过文本下的一条线 :text-decoration:line_through 首行缩进:text-indent:32px 背景属性 background-color: red; /*背景图片*/ background-image: url('1.jpg'); background-repeat:repeat(默认):背景图片平铺排满整个网页 background-repeat:no-repeat：背景图片不平铺边框边框宽度：border-width:1px 边框样式

订阅绝对定位