Jquery 列表子元素上的框阴影行为

我正在创建响应大小的卡片，如下所示

当我单击卡上的编辑按钮时，卡会获得一个

框阴影

，但它会向上移动。当我取消/保存输入时，它会再次移动。为什么会发生这种情况

这次我用

display:block/inline block

定位卡中的所有内容，以前我使用

display:table cell

，但我在调整元素大小时遇到问题，因此我更改了定位方法

感谢您的帮助：）

$（“.card”）。单击（函数（）{
if（$（this）.val（）==0）{
$（此）.addClass（“单击”）；
$（此）.val（1）；
}
否则{
$（此）.removeClass（“单击”）；
$（此）.val（0）；
}
});
$（“.action”）。单击（函数（）{
var thisCard=$（this.parent（）.parent（）；
此卡。添加类（“编辑”）；
thisCard.find（“.title”）.css（{“display”：“none”}）；
thisCard.find（“.action”）.css（{“display”：“none”}）；
thisCard.find（“.action edit”）.css（{“display”：“table cell”}）；
thisCard.find（“.input group”）.css（{“display”：“table cell”}）；
if（thisCard.find（“.input子行”）.length==0）{
thisCard.find（“.input main”）.val（thisCard.find（.title”）.text（）；
}
否则{
thisCard.find（“.input main”）.val（thisCard.find（.title main”）.text（））；
thisCard.find（“.input sub”）.val（thisCard.find（.title sub”）.text（））；
}
thisCard.find（“.input main”）.focus（）；
此card.removeClass（“单击”）；
});
$（“.check”）。单击（函数（）{
var thisCard=$（this.parent（）.parent（）.parent（）；
此卡。removeClass（“编辑”）；
thisCard.find（“.title”）.css（{“display”：“table cell”}）；
thisCard.find（“.action”）.css（{“display”：“table cell”}）；
thisCard.find（“.action edit”）.css（{“display”：“none”}）；
thisCard.find（“.input group”）.css（{“display”：“none”}）；
if（thisCard.find（“.input子行”）.length==0）{
thisCard.find（“.title”）.text（thisCard.find（“.input main”）.val（））；
}
否则{
thisCard.find（“.title main”）.text（thisCard.find（.input main”）.val（）；
thisCard.find（“.title sub”）.text（thisCard.find（.input sub”）.val（））；
}
此card.removeClass（“单击”）；
});
$（“.cancel”）。单击（函数（）{
var thisCard=$（this.parent（）.parent（）.parent（）；
此卡。removeClass（“编辑”）；
thisCard.find（“.title”）.css（{“display”：“table cell”}）；
thisCard.find（“.action”）.css（{“display”：“table cell”}）；
thisCard.find（“.action edit”）.css（{“display”：“none”}）；
thisCard.find（“.input group”）.css（{“display”：“none”}）；
此card.removeClass（“单击”）；
});
.card包装器{
宽度：计算（100%-48px）；
身高：100%；
左边框：虚线1px#ccc；
右边框：虚线1px#ccc；
填充：48px 16px 0；
背景色：#fff；
}
.卡德街{
宽度：100%；
}
.卡式电池{
显示：内联块；
宽度：计算（100%/6-20px）；
左侧填充：8px；
右边填充：8px；
边缘底部：16px；
}
.卡片{
宽度：100%；
高度：70像素；
边界半径：3px；
背景色：#F8；
盒影：0px 3px 6px 0 rgba（0,0,0,0.15）；
字体大小：16px；
光标：指针；
边框：实心1px透明；
}
.卡片.内容{
显示：块；
宽度：100%；
}
.卡片.内容.标题，
.卡片.内容.输入{
填充：24px 0 24px 24px；
字体大小：16px；
颜色：#333；
显示：内联块；
宽度：计算（100%-80px）；
}
.卡片.内容.标题{
空白：nowrap；
溢出：隐藏；
}
.卡片.内容.输入{
显示：无；
}
.input main，
.输入分接头{
边界：无；
字体大小：13px；
边框底部：实心1px#c4c4；
宽度：100%；
}
输入：焦点{
轮廓样式：无；
盒影：无；
边框底部：实心1px#c4c4；
}
.卡片.内容.行动{
宽度：24px；
填充：24px 20px 24px 12px；
文本对齐：右对齐；
显示：内联块；
垂直对齐：顶部；
浮动：对；
}
.card.content.action编辑{
显示：无；
宽度：36px；
填充：0；
左边框：实心1px#c4c4；
垂直对齐：顶部；
}
.检查，
.取消{
身高：34.5px；
文本对齐：居中；
}
.action edit>。检查i，
.action edit>.cancel i{
线高：35px；
字体大小：13px；
}
.取消我{
颜色：#333；
}
.检查i{
颜色：#00c983；
}
.检查身高，
.取消高{
高度：45.5px；
}
.检查我的身高，
.取消我{
线高：46px！重要；
}
.取消{
边框底部：实心1px#c4c4；
}
.卡片.内容.行动一{
字体大小：14px；
颜色：#333；
}
.卡片.内容.动作一：悬停{
颜色：#00c983；
}
.点击{
背景色：#CAF1FF；
盒影：0px 0px 32px 0 rgba（0153255,0.3）；
}
.编辑{
背景色：#fff；
边框：实心1px#00c983；
盒影：0px 0px 32px 0 rgba（0153255,0.3）；
}
.副标题{
字体大小：12px；
}
.字幕标签{
颜色：#999；
}
.输入分接头{
字体大小：12px；
}
.输入子行{
显示：表格行；
宽度：100%；
}
.输入子标签{
显示：表格单元格；
宽度：25%；
字体大小：12px；
颜色：#999；
}
.输入分接头{
显示：表格单元格；
宽度：100%；
}
.输入组{
显示：无；
填充：22px 24px；
}
.填写卡片{
位置：绝对位置；
右：16px；
底部：16px；
}
@介质（最大宽度：1199px）和（最小宽度：768px）{
.卡式电池{
宽度：计算（100%/4-20px）；
}
}
@介质（最大宽度：767px）和（最小宽度：576px）{
.卡式电池{
宽度：计算（100%/3-20px）；
}
}
@介质（最大宽度：575px）{
.卡式电池{
宽度：100%；
左侧填充：0；
}
}



管理


农业


建筑学


艺术与设计