Question

需要有关实现以下UI的帮助。显示具有绝对位置的父元素的内部子元素out / top。这可以使用CSS实现吗？
的注意：我无法从css中删除溢出属性..（。absolute1）块有很多数据，至少我必须给溢出-y：scroll;

这是我尝试过的JSFIddle

＆＃13;

$scope.changeItem = function(item){
  console.log(item.name);
}

＆＃13;

div.relative {
  position:relative;
  border:3px solid #73AD21;
  height:350px;
  width:550px;
  z-index:111;
}

.absolute1 {
  position:absolute;
  border:2px solid skyblue;
  width:200px;
  height:150px;
  z-index:555;
  overflow:auto;
}

.absolute2 {
  box-shadow:2px 2px 2px 2px #CCC;
  width:50px;
  height:50px;
  position:absolute;
  right:0;
  top:0;
  z-index:999;
  background:yellow;
  margin-right:-25px;
}

＆＃13;

Answer 1

删除overflow:auto课程中的.absolute1。并在div中包含absolute1的内容并将其提供给overflow:auto。

div.relative {
  position: relative;
  border: 3px solid #73AD21;
  height:350px;
  width:550px;
  z-index:111;
  padding: 15px;
}
.absolute1 {
  position:absolute;
  border:2px solid skyblue;
  width:200px;
  height:150px;
  z-index:555;  
}
.absolute1_desc{
  overflow:auto;
}
.absolute2 {
  box-shadow:2px 2px 2px 2px #CCC;
  width:50px;
  height:50px;
  position:absolute;
  right:0;
  top:0;
  z-index:999;
  background:yellow;
  margin-right:-25px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>    
  <div class="relative">
  Test data Test Data Test Data
    <div class="absolute1">
        <div class="absolute1_desc">SomedataT Data Test Data Test data Test Data Test DataTest data Test Data </div>
        <div class="absolute2">
        top 2
        </div>
    </div>
  </div>  
</body>
</html>

Answer 2

将absolute1中的内容保存在另一个名为div的{{1}}中，其中包含给定的样式，并将absolute3移至border和absolut1至{{1} }}

margin-right:-25px

absolut2

Answer 3

您需要在.absolute1中嵌套另一个元素，并将overflow规则声明为此嵌套元素，如下面的嵌入式代码段所示：

/* Additional */
.absolute1 .text-wrapper {
  overflow: auto;
  height: 100%;
}

＆＃13;

div.relative {
    position: relative;
    border: 3px solid #73AD21;
    height:350px;
    width:550px;
    z-index:111;
}
.absolute1 {
position:absolute;
border:2px solid skyblue;
width:200px;
height:150px;
z-index:555;
}

/* Additional */
.absolute1 .text-wrapper {
  overflow: auto;
  height: 100%;
}

.absolute2 {
box-shadow:2px 2px 2px 2px #CCC;
width:50px;
height:50px;
position:absolute;
right:0;
top:0;
z-index:999;
background:yellow;
margin-right:-25px;
}

＆＃13;

<div class="relative">
layer 1
  <div class="absolute1">
  <div class="text-wrapper">
    Layer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2Layer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2Layer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2Layer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2Layer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2Layer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2Layer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2Layer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2vLayer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2vvvLayer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2Layer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2Layer 2 Layer 2   Layer 2 Layer 2   Layer 2 Layer 2
  </div>
      <div class="absolute2">
      top 2
      </div>
  </div>
</div>

＆＃13;

如何在父绝对元素上设置绝对位置？

3 个答案: