jquery - How to bypass the width limit of the container element

Question

I have a div container with the width 500px;

in this div element there are several images.

I have written a jQuery code for these images so that when a user clicks on an image, it shows a large version of it. this large version must be wrapped up with a div. Now, that div, due to its parent container, could not go more than 500px in width. I need at least 1200px width. How can overcome this problem?

thanks in advance

Answer 1

您需要绝对定位您的子 div 元素，以便它从父元素中“逃脱”。

例子

HTML

<div id="parent">
    Parent
    <div id="child">Child</div>
</div>

CSS

#parent {
width:100px;
height:100px;
background-color:blue;}

#child {
position:absolute;
width:200px;
height:200px;
top:100px;
left:20px;
background-color:red;}

Answer 2

您不一定需要为此使用position: absolute。

一个子元素width: 100%填满了父元素的整个宽度。给它一个更大的宽度，例如width 300%，允许它延伸通过它的父级。要将其居中，您可以使用等于添加宽度的 50% 的负值margin-left（或简单地使用）将其向左微移。left

这是一支笔。