CCS基础 - position

position属性的值如下:

1.absolute:生成绝对定位的元素,相对于当前元素的父元素中position为static之外的第一个元素进行定位

.box {
float:left;
border-style:dotted;
border-color:blue;
background-color:#bbb;
margin-right:2%;
margin-left:2%;//box的左侧盒最外层的width是其父元素中position为static之外的第一个元素的宽度的26%;
top:-30px;
width:16%;//box的width是其父元素中position为static之外的第一个元素的宽度的26%;
height:200px;
bottom:30px;//box的底部高于其父元素中position为static之外的第一个元素的底部30px;

position:absolute;//如果position为fixed,则box的位置,宽度引用均参照于浏览器窗口的大小;
}

2.fixed:生成绝对定位的元素,相对于浏览器窗口

3.static:position的默认值,此时忽略当前元素上定义的top,left,reght,bottom,z-index

4.relative 生成相对定位元素,按照正常的位置进行布局,top=20px 会给该元素左侧增加20px的间隔。

.main {
position:relative;
margin-top:50px;
border-style:dashed;
border-color:red;
border-width:3px;
height:300px;
width:1560px;
}

5.inherit从父元素获取position值

 

时间: 2024-11-06 02:58:19

CCS基础 - position的相关文章

css基础 position:fixed/absolute 把div转换为行内块元素

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

CSS基础——position位置属性

relative:相对布局,相对自身进行偏移,并且保留原有位置. absolute:绝对布局,相对容器进行偏移,不保留原有位置.注意:容器必须设置position为relative或absolute,如果没有相对body偏移.  同一行中absolute会对 inline-block 有影响,具体是将原来顶部对齐,变成底部对齐.这时用float不会有影响. fixed:固定布局,相对浏览器窗口位置固定,没有任何依赖感. static:position的默认值. z-index:重叠时设置层次,值

CSS的position设置

CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getS

CSS固定层的效果实现

固定层的作用 内容不随页面滚动 应用范围 一般用于头部导航/底部导航/页面中间导航(京东的宝贝详情页有用到,看图) 小伙伴们可以去京东随便打开一个宝贝看看.. 制作 预备知识: DIV+CSS基础 Position的四个参数作用,这里主要用到fixed属性 Tips: fixed和absolute都是脱离文档流的 区别: absolute会随页面滚动而fixed不会 absolute的父级元素若是使用了position属性,absolute会遵循就近原则,以最近的父辈为基准 fixed是以内容窗

2020年前端面试复习必读文章【超百篇文章/赠复习导图】

前言 之前写过一篇 一年半经验如何准备阿里巴巴前端面试,给大家分享了一个面试复习导图,有很多朋友说希望能够针对每个 case 提供一个参考答案. 写答案就算了,一是「精力有限」,二是我觉得大家还是需要自己「理解总结会比较好」. 给大家整理了一下每个 case 一些还算不错的文章吧(还包括一些躺在我收藏夹里的好文章),大家可以自己看文章总结一下答案,这样也会理解更深刻. 「并不是所有文章都需要看」,希望是一个抛砖引玉的作用,大家也可以锻炼一下自己寻找有效资料的能力 ~ ( 文章排序不分前后,随机排

java web 开发三剑客 -------电子书

Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知Internet的目的是让各个net交互.所以,Internet实质上是将世界上各个国家.各个网络运营商的多个网络相互连接构成的一个全球范围内的统一网,使各个网络之间能够相互到达.各个国家和运营商构建网络采用的底层技术和实现可能各不相同,但只要采用统一的上层协议(TCP/IP)就可以通过Internet

css3基础 transition 配合position,实现从左往右弹出的效果

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css3基础 transition 配合position,实现从右往左弹出的效果

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css基础篇(三)——布局(上)float和position

1.定位(position) position的值有:relative/absolute/fixed/static/inherit; static:为position属性的默认值,static元素会遵循正常的文档流,且会忽略top,bottom,left,right等属性; inherit:如同其他css的inherit值,即继承父元素的position值(ie不支持) 下面重点介绍前三个值: 1.1 相对定位(relative) 场景描述(如上图):第二个div的位置相对自己向下向右移动30p