让position:absolute超出DIV溢出隐藏

当前位置: 首页 » 代码 » 让position:absolute超出DIV溢出隐藏

Zero零分代码 9,180 0 6年前

通常，为了让DIV子元素超出部分隐藏，都是在父元素设置overflow:hidden，这样即可防止子元素撑开父元素，使子元素能够溢出隐藏！

但是，对于position:absolute定位的子元素，仅仅使用overflow:hidden没办法将其溢出部分隐藏，需要在父元素上也加上一个定位position:relative;才能将含有 position:absolute属性的子元素进行溢出隐藏！

效果：

代码：

<style>
.box{
width:200px;
height:150px;
overflow:hidden;
border:2px solid #000;
float:left;
margin-right:20px;
}
.relative{
position:relative;
}
.div{
width:200px;
height:100px;
background:#FF5400;
margin-top:100px;
position:absolute;
}
.zi{
width:200px;
height:300px;
background:#FF0000;
}
</style>
<div class=“box”>
高300px的子元素溢出隐藏
<div class=“zi”></div>
</div>
<div class=“box”>
不带relative
<div class=“div”></div>
</div>
<br><br><br><br><br><br>
<div class=“box relative”>
带上relative
<div class=“div”></div>
</div>

附：

1、CSS overflow属性，overflow 属性规定当内容溢出元素框时发生的事情，所有主流浏览器都支持 overflow 属性。任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值：visible

hidden：内容会被修剪，并且其余内容是不可见的。

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit：规定应该从父元素继承 overflow 属性的值。

2、position属性，position 属性规定元素的定位类型。所有主流浏览器都支持 position 属性。任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值：static

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative：生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20″ 会向元素的 LEFT 位置添加 20 像素。

static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit：规定应该从父元素继承 position 属性的值。

发布:2015-11-27 23:40:06
标签:CSS移出隐藏 overflow Position
链接:https://blog.32xp.com/positionabsolutediv-533.html

END

不知何时，习惯把垃圾丢给JS了上一篇

从今天起,代码尽量规范下一篇

你必须登录才能发表评论.

用户评论(0)

评论功能已经关闭!

CSS中Position:fixed偏移解决方案

Position:fixed，生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 Position:fixed，在实际使用过程中多少都会遇到偏移的问题。虽然说 Position:fixed是相对于浏览器进行定位的，有时候也会受到外层DIV的影响，在非IE下， Position:fixed，浮动时是水平位置是相对于外层的。如果需要水平居中，可以设置left:50%,margin-left:- Position:fixed /2，即本身宽度的一半。其实，CSS位置的设置逻辑还和数学真有点关系！当然，可以设置一个居中层，margin：0 auto；外层，内层进行 Position:fixed，也会水平居中。同样也实用于IE浏览器。不过，对于非水平居中的，比如侧栏浮动，可以加个同样大小的DIV外层，一来可以在外层添加一个ID，以便JS scrollTop 来识别。二来，可以在position:fixed后保留位置，以便在高度不够特别是临界的情况下还能保持原来的高度。 Position:fixed，虽然是相对于浏览器定位的，但是，在判断滚动条而进行是否需要 Position:fixed的，可以添加一个外层给一个水平位置的定位，防止因添加了 Position:fixed后，IE下，层进行了左右的偏移

随笔 · 6年前

一个很有趣的CSS3动画效果

一个很有趣的CSS3动画效果，可当过渡页，如loading！完整代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="robots" content="noindex,follow"> <title>加载中</title> <style> body{font-weight:100;margin:0}body{-webkit-tap-highlight-color:transparent;background-color:#222428;font-size:100%;font-family:Open Sans;height:100%}.loader{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-mos-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;width:80%;overflow:visible}.loader,.loader div{position:absolute;height:36px}.loader div{width:30px;margin:0 10px;opacity:0;animation:move 2s linear infinite;-o-animation:move 2s linear infinite;-moz-animation:move 2s linear infinite;-webkit-animation:move 2s linear infinite;transform:rotate(180deg);-o-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);color:#fff;font-size:3em}.loader div:nth-child(8):before{background:#db2f00}.loader div:nth-child(8):before,.loader div:nth-child(9):before{content:'';position:absolute;bottom:-15px;left:0;width:30px;height:30px;border-radius:100%}.loader div:nth-child(9):before{background:#f2f2f2}.loader div:nth-child(10):before{bottom:-15px;height:30px;background:#13a3a5}.loader div:after,.loader div:nth-child(10):before{content:'';position:absolute;left:0;width:30px;border-radius:100%}.loader div:after{bottom:-40px;height:5px;background:#39312d}.loader div:nth-child(2){animation-delay:.2s;-o-animation-delay:.2s;-moz-animation-delay:.2s;-webkit-animation-delay:.2s}.loader div:nth-child(3){animation-delay:.4s;-o-animation-delay:.4s;-webkit-animation-delay:.4s}.loader div:nth-child(4){animation-delay:.6s;-o-animation-delay:.6s;-moz-animation-delay:.6s;-webkit-animation-delay:.6s}.loader div:nth-child(5){animation-delay:.8s;-o-animation-delay:.8s;-moz-animation-delay:.8s;-webkit-animation-delay:.8s}.loader div:nth-child(6){animation-delay:1s;-o-animation-delay:1s;-moz-animation-delay:1s;-webkit-animation-delay:1s}.loader div:nth-child(7){animation-delay:1.2s;-o-animation-delay:1.2s;-moz-animation-delay:1.2s;-webkit-animation-delay:1.2s}.loader div:nth-child(8){animation-delay:1.4s;-o-animation-delay:1.4s;-moz-animation-delay:1.4s;-webkit-animation-delay:1.4s}.loader div:nth-child(9){animation-delay:1.6s;-o-animation-delay:1.6s;-moz-animation-delay:1.6s;-webkit-animation-delay:1.6s}.loader div:nth-child(10){animation-delay:1.8s;-o-animation-delay:1.8s;-moz-animation-delay:1.8s;-webkit-animation-delay:1.8s}@keyframes move{0%{right:0;opacity:0}35%{right:41%}35%,65%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}65%{right:59%}to{right:100%;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}}@-webkit-keyframes move{0%,to{opacity:0}0%{right:0}35%{right:41%}35%,75%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}75%{right:59%}to{right:100%;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);opacity:0}} </style> </head> <body class="ie8"> <div class="loader"> <div> C </div> <div> S </div> <div> S </div> <div> 动 </div> <div> 画 </div> <div> 吗 </div> <div> ？ </div> <div> </div> <div> </div> <div> </div> </div> </body> </html> 演示地址：效果演示

代码 · 10个月前

JOS京东联盟API接口调用

突然突然突然，觉得做一个京东联盟API调用，也许，在微信QQ等场景是不会有被屏蔽的现象。于是于是于是，就去研究了下京东联盟API，看着一堆接口，描述的确挺不错的，实际返回内容，可能不是你想的那样。。。另外另外另外，京东联盟的API调用是需要一个token授权的，而且，这个token授权还需要登陆京东账户的，好在这个token的有效期是1年，在1年内，登陆一次就好！据说，修改过京东账户密码，是需要重新获取一次的！好吧好吧好吧，那就来获取token授权码，想获取token，先得获取code，通过code，再获取token！先看下官方说明：再看下获取授权码的API请求链接： https://oauth.jd.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID& redirect_uri=YOUR_REGISTERED_REDIRECT_URI&state=YOUR_CUSTOM_CODE 对着参数列表，链接是这样的！ https://oauth.jd.com/oauth/authorize?response_type=code&client_id=你的Appkey& redirect_uri=你的回调URL&state=随意写改好后，复制黏贴到浏览器打开，就是一个授权登陆，登陆之后自动跳转到回调地址，参数中带有code值！通过code值获取token，获取token值请求地址： https://oauth.jd.com/oauth/token?grant_type=authorization_code&client_id=你的Appkey& redirect_uri=你的回调URL&code=刚刚获取的code&state=随意写&client_secret= 你的appSecret 复制到浏览器打开，就可以获得需要的token。另外，有一个叫做Refresh token的刷新token来延迟Access token的时效，也就是，如果获取一次，可以在有效期内延长时间，比如计划！获取了Access token之后，就可以使用API接口了！最后，只想说，京东联盟的API，始终没有阿里妈妈API来的方便！参考官方文档：//jos.jd.com/doc/channel.htm?id=152

代码 · 4年前

贴图库图床上传程序

代码 · 6年前

淘点金href值

最近一段时间，写一个淘点金店铺的集合页(//mall.moutaowang.com)，在写链接的时候希望A标签能有站内链接href值，同时又需要点击能直接跳转淘点金链接！按照搜索引擎的观点，站内链接能提高爬虫，实际点击的效果是跳转到淘点金生成的链接！部署完淘点金链接之后，发现如果有站内href值，淘点金无法生效，移除href值淘点金能成功生效。淘点金组件部署： <a biz-sellerid=“1753012236” isconvert=“1” href=“//mall.moutaowang.com/shop/29-1.html” target=“_blank”>申美盛旗舰店</a> 淘点金click组件，需要两个属性biz-sellerid和isconvert 带有href值的直接链接到href的链接，不带href就可以链接到淘客链接！搜索引擎对JS无视，利用JQ过滤href值。 $(“a[isconvert^=’1′]”).each(function(i){ $(this).removeAttr(“href”); $(this).css(‘cursor’,’pointer’); 这样，查找 isconvert属性的A标签移出href，这样右击查看属性，地址(URL)就是淘点金生成的淘客链接了！查看源码，href值就是站内的链接！因为使用JQ，所以要在文档中引入JQ库！

代码 · 6年前

Zero零分

站龄14年资深站长

一个喜欢折腾，却又折腾不出像样东西的，不会PHP的PHP程序员！

474
文章 26
评论 27
分类 839
标签 7
友链

onlinelovesky 317355746 122551965@qq.com

零分博客