<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.box {
position: relative;
width: 300px;
height: 100px;
border: 10px solid red;
box-sizing: border-box;
}
.item2 {
position: absolute;
right: -10px;
bottom: -10px;
width: 0px;
height: 0px;
box-sizing: border-box;
border: 10px solid transparent;
}
.box:hover .item2 {
box-sizing: border-box;
width: 300px;
height: 100px;
border-color: black;
transition: all 1s;
}
</style>
</head>
<body>
<div class="box">
<div class="item2"></div>
</div>
</body>
</html>
-
等级
本版专家分：458结帖率 96% -
为什么我设置了item2 的 right 和 bottom，以及 item2 的宽高，它就可以向上伸展，而不是基于right 和 bottom向下伸展？
展开阅读全文
-
等级
本版专家分：86勋章
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
-
你可以理解为 你把item2定位在了右下角。
如果你希望他往下和往右延展，那么你就把它定位在左上角。
-
等级
本版专家分：138勋章
-
- 签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
-
字面意思，盒子定位（上右下左），top起点基于盒子上，right基于右，bottom基于下，left基于左
-
等级
本版专家分：8勋章
-
- 技术圈认证 用户完成年度认证，即可获得
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
-
top：.item2的上边与.box上边的距离，从上往下为正；
right：.item2的右边与.box右边的距离，从右往左为正；
bottom：.item2的下边与.box下边的距离，从下往上为正；
left：.item2的左边与.box左边的距离，从左往右为正；
-
等级
本版专家分：8勋章
-
- 技术圈认证 用户完成年度认证，即可获得
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
-
设置.item2的定位时，会使.item2具备一个宽高，这个宽高的优先级比width和height低
-
等级
本版专家分：8勋章
-
- 技术圈认证 用户完成年度认证，即可获得
-
- 签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
-
item2 标签那里设置了绝对定位，此时标签是相对父标签进行定位，楼主设置了这个right和bottom值
此时位置正好在父标签的最右下端外侧
如果要实现向下伸展，只需设置这两个值即可
运行结果:
- 2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k下的都会出笔试题 特别高的薪资都是直接技术面试或者是 现场编程 总结很多人的面试题，后期会对于单个知识点再说笔记详细讲解。 ...
- 前端面试锦集
前端面试锦集
- 前端面试题
前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？...它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...
- translate与绝对定位、相对定位的区别
在表现上看，使用 CSS3 translate 函数和绝对定位、相对定位属性加上 top、left 数值都可以使元素产生位移。实际上它们还是有不少的区别。 一：元素视图属性中的 offsetLeft 和 offsetTop 属性。 我们分别用相对定位...
- C#基础教程-c#实例教程，适合初学者
本章介绍C#语言的基础知识，希望具有C语言的读者能够基本掌握C#语言，并以此为基础，能够进一步学习用C#语言编写window应用程序和Web应用程序。当然仅靠一章的内容就完全掌握C#语言是不可能的，如需进一步学习C#语言...
- 毕业设计
开始做毕业设计了，记录一下最后一次做项目了，唉 时间：2019/12/06 Day 06 今晚就设计了一个表 user_info用户表 字段名称 类型 是否主键 是否为空 ... ...
- WPF学习
首先感谢刘铁锰先生的《深入浅出WPF》，学习WPF过程碰上很多新概念，如Data Binding、路由事件，命令、各种模板等。 WPF：编写CS端的UI技术。 怎么去掉WPF窗体靠上多出黑色的长条？...(我自己觉得偶尔会用用这个) ...
- position（绝对定位与相对定位）
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 ...
- 绝对定位position:absolute下，父元素高度塌陷/无法撑开父盒子的原因和解决方案
我一直很困惑绝对定位后父盒子的高度会变为0，如何让绝对定位的元素撑开父盒子呢？ 我在StackOverflow上找到的高分解决方案如下： Absolutely positioned elements are completely removed from the document flow, ...
- CSS实现文字或图片等元素垂直、水平、绝对定位居中技术
绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: [css] view plain copy print?....
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
目录(?)[+] ...绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS:
- 20120最新Web前端经典面试试题及答案-史上最全前端面试题汇总(含答案)
前端面试题： 1.一个200*200的div在不同分辨率屏幕上下左右居中...height:200px; top:50%; left:50%; margin-left:-100px; height:-100px; z-index:1000; } 2.写一个左中右布局占满屏幕，其中左右两块是固定宽度2...
- CSS实现绝对定位居中
我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; ...
- 子元素要绝对定位时，父元素应该怎么办？
如果子元素设置绝对定位（absolute），父元素需要设置相对定位(relative)，否则子元素就不知道会飘到哪去了。 本着知其然还要知其所以然的学习态度，就去Google了，得到了一些见解，以下： 一、表 实现子...
- div绝对定位居中
绝对定位absolute，left：50%，加上margin-left：-（宽度/2），可以实现绝对位置居中 .list{ width: 1200px; height: 300px; overflow: hidden; position: absolute; left: 50%; margin-left: -600px;}上面是早期...
- 从一个居中方法说起 —— 谈 translate 与 相对、绝对定位
方法介绍 垂直水平居中是日常前端开发当中一个常见的需求，在支持 CSS3 属性的现代浏览器当中，有一个利用 CSS3 属性的垂直水平居中方法： css .center { position: absolute; top: 50%;... -ms-transform: ...
- CSS实现垂直居中水平居中的绝对定位居中技术
CSS实现垂直居中水平居中的绝对定位居中技术 Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅...
- 宽度属性不适用于绝对定位的div
On his homepage I wanted to do a little horizontally-scrolling gallery with his 5 most recent works. Also, the idea is that when a person hovers over each of his images, they will see the name of the...
- absolute绝对定位(相对于整个html流)以及不为人知的（fixed）绝对定位(fixed相对于浏览器窗口=不动的div).....
<div style="...height:2000px;background-color:yellow;"> This tall div is absolutely positioned 500 pixels from the top and 60 pixels from the left of its co...
- github前端面试题2
收集的前端面试题和答案 https://github.com/qiudeqing/ FEinterview 1/38 收集的前端面试题和答案 img update 2 years ago README.md fix article origin a year ago qiu‐deqing / FE-interview...
- Selenium Webdriver元素定位的八种常用方法
在使用selenium webdriver进行元素定位时，通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素。其中By类的常用定位方式共八种，现分别介绍如下： 1. By.name() 假设我们要测试的页面源码如下...
- css定位属性和背景属性
一、定位属性 定位属性position的属性值有：static/...下面从这两个角度分析一下静态、相对、绝对和固定定位。 1. 静态定位 静态定位static是position属性的默认值，正常情况下采用的都是静态定位。因此常规...
- a标签加绝对定位在图片上面，a的链接和块状属性block失效,而且是所有IE版本都失效的...
谷歌和火狐浏览器下测试是正常的，IE下鼠标移过logo是没有超链接的提示的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
- CSS Positioning(定位)与Float(浮动)
一、CSS Positioning(定位) ...元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法.有四种不同的定位方法。 2、Static 定位
- 微信小程序源码-合集6.rar
微信小程序源码，包含：图片展示、外卖点餐、小工具类、小游戏类、演绎博览、新闻资讯、医疗保健、艺术生活等源码。
- C#高性能大容量SOCKET并发完成端口例子（有C#客户端）完整实例源码
例子主要包括SocketAsyncEventArgs通讯封装、服务端实现日志查看、SCOKET列表、上传、下载、远程文件流、吞吐量协议，用于测试SocketAsyncEventArgs的性能和压力，最大连接数支持65535个长连接，最高命令交互速度达到250MB/S（使用的是127.0.0.1的方式，相当于千兆网卡1Gb=125MB/S两倍的吞吐量）。服务端用C#编写，并使用log4net作为日志模块； 同时支持65536个连接，网络吞吐量可以达到400M。
- 2020简历模板合集.rar
2020简历模板合集
- 从零基础开始用Python处理Excel数据.pdf
首先学习Python的基础知识，然后使用Python来控制Excel，做数据处理。 Excel使用者、Python爱好者、数据处理人员、办公人员等 第1章 python基础 1.1 什么是python？ 1.2 为什么要学习用Python处理Excel表格？ 1.3 手把手教你安装python程序 1.3.1 下载python 1.3.2 安装python 1.3.3 验证是否安装成功 1.4 安装Python集成开发工具PyCharm 1.4.1 下载 1.4.2 安装 1.5 Python的输入与输出
- jdk1.8 64位官方正式版 jdk-8u91-windows
jdk1.8 64位官方正式版 jdk-8u91-windows
- C#入门必看实力程序100个
C#入门必看含有100个例字,每个例子都是针对C#的学习关键知识点设计的,是学习C#必须知道的一些程序例子,分享给大家，需要的可以下载