我是靠谱客的博主 害羞鸡,最近开发中收集的这篇文章主要介绍css怎么让元素超出父元素,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

CSS让子容器超出父元素(子容器悬浮在父容器效果)

前言

有时候,我们需要如下图这样一个悬浮效果需求:
在这里插入图片描述
在这里插入图片描述

实现

在标准的正常的情况下,只能使用 绝对定位 来完成。
在这里插入图片描述

第一步:父容器定位设置为 relative(相对定位)
第二步:子容器定位设置为 absolute(绝对定位)

<p id="a">
   <p id="b">我要浮出去!</p></p>
登录后复制
#a{
  width:400px;
  height:100px;
  background:rgb(0, 0, 0);
  position:relative;/*父元素>相对定位*/}#b{
  width: 150px;
  height:50px;
  background:rgb(185, 155, 255);
  position:absolute;/*子元素>绝对定位*/
  top:-30px;/*控制浮出*/
  /* left:XX; */}
登录后复制

效果图:
在这里插入图片描述

【推荐学习:css视频教程】
父元素设置 绝对定位 ,子元素设置 相对定位 ,即子元素依照父元素进行定位。

以上就是css怎么让元素超出父元素的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是害羞鸡为你收集整理的css怎么让元素超出父元素的全部内容,希望文章能够帮你解决css怎么让元素超出父元素所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(83)

评论列表共有 0 条评论

立即
投稿
返回
顶部