首页 > 编程知识 正文

使用position如何居中,css超出部分滚动条

时间:2023-05-05 11:13:26 阅读:117376 作者:1187

通常,若要防止DIV的子元素部分隐藏,请将父元素设置为overflow:hidden。 这样可以防止子元素扩展父元素,防止子元素溢出并隐藏。

但是,对于position:absolute定位的子要素,仅靠overflow:hidden无法隐藏溢出部分,需要在父要素中也添加定位位置: relative; 可以溢出隐藏包含position:absolute属性的子元素。 效果:

代码:

style.box{ width:200px; height:150px; Overflow :隐藏; border :2 px固态# 000; 浮点:左; margin-right:20px; }.relative { position : relative; }.div{ width:200px; height:100px; 后台: # ff 5400; margin-top:100px; 位置: absolute; )鲤鱼大楼({ width:200px; height:300px; 后台: # ff 0000; }/stylediv class='box '高300px的子元素溢出隐藏div class='线圈大厦'/div/divdivclass=' box '无relativedivclass=' div '/div

附件:

1、CSS溢出属性、溢出属性规定内容溢出元素框时发生,所有主要浏览器都支持溢出属性。 任何Internet Explorer版本(包括IE8 )都不支持属性值“inherit”。

此属性定义了如何处理溢出元素内容区域的内容。 如果值为scroll,则无论是否需要用户代理,都提供滚动机制。 因此,即使可以将所有内容放置在元素框中,也可能会显示滚动条。 默认值:可见

隐藏:内容已修剪,其余内容不可见。

scroll :会裁剪内容,但会在浏览器中显示卷轴,让您检视其馀的内容。

自动:修剪内容后,浏览器中将显示滚动条,并显示其馀内容。

inherit :指定从父元素继承overflow属性的值。

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

此属性定义了用于创建元素布局的放置机制。 可以放置任何元素,但绝对或固定元素会生成块级框,无论元素本身是什么类型。 相对位置元素从正常流程中的缺省位置偏移。 默认值:静态

absolute :生成绝对位置的元素,相对于静态位置以外的第一个父元素定位。 元素的位置由“左”、“顶”、“右”和“底部”属性定义。

固定:生成相对于浏览器窗口定位的绝对位置的元素。 元素的位置由“左”、“顶”、“右”和“底部”属性定义。

relative :生成相对放置的元素,并将其相对于其正常位置放置。 因此,“LEFT:20”会在元素的left位置添加20像素。

静态:默认值。 没有定位,元素出现在正常的流中。 (忽略顶部、底部、左边缘、右边缘或z索引声明。

inherit :指定从父元素继承位置属性的值。

博客: http://blog.32xp.com/positionabsolutediv-533.html

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。