Question

我有问题。

我正在使用小部件在某人的页面上显示某些元素。我创造了一个小提琴，请看：

＆＃13;

   QPixmap original(imgPath); // read in the image that was selected from tree
   QPixmap cropped = original.copy(cropRectInt); // make copy of image that is cropped to the size of the rect

//***Convert cropped to lower res here***//

   QFile file("5.png");
   cropped.save(&file, "PNG"); // save for testing

   QByteArray byteArray;
   QBuffer buffer(&byteArray);
   cropped.save(&buffer, "PNG"); 
   QString imgBase64 = QString::fromLatin1(byteArray.toBase64().data());

＆＃13;

.wrapper {
  width: 300px;
  display: block;
  position: relative;
  overflow: hidden;
  background-color: gray;
}
.widget {
  width: 300px;
  height: 300px;
  display: block;
  position: relative;
  background-color: green;
}
.box {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 250px;
  top: 50px;
  background-color: red;
  visibility: visible;
}

＆＃13;

我们对窗口小部件内部的某些元素有绝对定位，但用户页面上的外部父窗口上有<div class="wrapper"> <p>Some text and descriptions</p> <div class="widget"> <div class="box"></div> </div> <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p> </div>，因此部分元素被部分隐藏。

有没有让这项工作？没有弄乱父母元素文本。所以在小提琴上你会看到红色的盒子，我们希望它能完全显示出来。

但是我们无法更改任何包装器属性！有趣的小游戏;）

盒子上的固定位置没有用，因为它会导致问题。

https://jsfiddle.net/9484wtna/7/

Answer 1

使用jQuery，您可以在窗口小部件容器外部创建元素。

$(".widget").parent().after('<div class="box"></div>');

...但是需要调整位置才能正确对齐。

请参阅小提琴https://jsfiddle.net/c01gat3/p050togb/

Answer 2

在box-wrapper元素上添加position: fixed应该可以正常工作

fiddle

.wrapper {
    width:300px;
    display:block;
    position:relative;
    overflow:hidden;
    background-color:gray;
}
.widget {
    width:300px;
    height:300px;
    display:block;
    //position: relative;
    background-color:green;
}
.box-wrap{
    display:block;
    position: fixed;
}
.box {
    width:100px;
    height:100px;
    position:absolute;
    left:250px;
    top:50px;
    background-color:red;
    visibility:visible;
}

如何忽略/覆盖溢出：隐藏父div而无法访问其CSS

2 个答案: