Html 如何将输入字段放置在成形div的顶部？

我有一个五边形的div，我想在上面有一些输入字段：

/*创建五角大楼形状*/
#五角大楼{
位置：相对位置；
宽度：54px；
框大小：内容框；
边框宽度：50px 18px 0；
边框样式：实心；
边框颜色：红色透明；
}
#五角大楼：以前{
内容：“；
位置：绝对位置；
身高：0；
宽度：0；
顶部：-85px；
左-18px；
边框宽度：0 45px 35px；
边框样式：实心；
边框颜色：透明红色；
}
.分区{
利润率：40像素
}

---

如果使用否定的

top

属性，则使用注释中建议的

absolute

定位将有效

首先，我们来详细说明为什么这不起作用：您正在使用元素上/侧边框创建形状，这意味着元素本身实际上隐藏在形状下方（就像您放入其中的任何内容一样），使用绝对可以从常规文档流中移除子元素，并将其向上移动，与

：before

伪元素相同

基本固定尺寸示例：

/*创建五角大楼形状*/
#五角大楼{
位置：相对位置；
宽度：54px；
框大小：内容框；
边框宽度：50px 18px 0；
边框样式：实心；
边框颜色：红色透明；
}
#五角大楼：以前{
内容：“；
位置：绝对位置；
身高：0；
宽度：0；
顶部：-85px；
左-18px；
边框宽度：0 45px 35px；
边框样式：实心；
边框颜色：透明红色；
}
输入{
位置：绝对位置；
顶部：-50px；
宽度：50px；
}
.分区{
利润率：40像素
}

---

只需添加

z-index:-1到后面的伪元素
因此
css
将如下所示

.pentagon:after {
  position: relative;
  content: '';
  border-bottom: 180px solid rgb(0, 66, 128);
  border-left: 180px solid transparent;
  border-right: 180px solid transparent;
  bottom: 180px;
  left: -90px;
  z-index: -1;  
}

使用绝对位置定位输入字段。使用绝对位置可以相对父元素的位置更改位置



我的jQuery
/*创建五角大楼形状*/
#五角大楼{
位置：相对位置；
top:41px；
宽度：81px；
框大小：内容框；
边框宽度：50px 18px 0；
边框样式：实心；
边框颜色：红色透明；
}
#五角大楼：以前{
内容：“；
位置：绝对位置；
身高：0；
宽度：0；
顶部：-85px；
左-18px；
边框宽度：0 58px 35px；
边框样式：实心；
边框颜色：透明红色；
}
.分区{
利润率：40像素
}
输入{
位置：相对位置；
顶部：-65px；
左：-47px；
}
在您的示例中，这看起来不是特别的五边形，您能仔细检查一下它是否如预期的那样出现吗？（另外，您似乎正在创建带有边框的形状，这样就不可能在形状中放置东西，因为形状的内部实际上不在元素中）举个例子，我认为您必须将输入放在另一个包含div的容器中，然后将此容器放在五角大楼上需要的任何位置，使用
position:absolute
@DBS我刚刚修复了形状，这是我发布代码时的错误。谢谢现在，您可以创建五角大楼形状，但如果您尝试在其中放置输入字段，则无法工作。@Chaz我尝试过，请检查更新的代码。现在不行了我们在说话！！谢谢你将如何调整尺寸（使五角大楼更大）？！这是DBS的可行解决方案吗。通常，当我处理css时，我会尽量避免使用绝对值。如果需要使用负数
top
和
left
属性来定位相对于五角大楼的输入，那么position:relative也会起作用：@SandrinJoy
absolute
在需要中断常规文档流时非常有效。这通常不是你想要做的很多事情，过度使用/滥用
绝对值
当然是件坏事，但是当你有一个小的包含元素，而问题需要它时，它可能是一个很好的解决方案。@dontdownvoteme在使形状变大方面，有相当多的改变/数学需要做。在我脑海中，我想你需要编辑：
#五角大楼
s
宽度
，
边框宽度
。和
#五角大楼：在
s
顶部
，
左侧
，
边框宽度
属性。我会看看我是否能找出它并扩展我的答案。不，它不起作用，它会产生另一种形状的三角形！