Question

道歉可能是一个简单的问题。到目前为止，我已经非常直观地浏览HTML和CSS，并且根据需要进行了Google搜索，但我已经达到了混乱的程度。

我正在尝试编辑我的主题，以便女演员的形象与侧边栏like so重叠。我希望在放大/缩小时将图像与博客的其余部分进行缩放，并以不同的分辨率保留在侧边栏的顶部。

我一直在尝试复制代码here来实现这一点，但我仍然遇到问题，实际上是通过侧边栏来扩展它。它也不与侧边栏重叠（侧边栏覆盖它）。

到目前为止我编辑过的主题：

{
Console.WriteLine("Whatever you type, You will get same Output");
string userValue;
userValue = Console.ReadLine();
Console.WriteLine("Your written Words Are: " + userValue);
Console.ReadLine();
}

感谢。

Answer 1

好的，现在就完成了。

.inner{

z-index:-110;
width:100%;
height:100%;
border: 1px solid black;
position:absolute;
left: 0;
    right: 0;
    top:168%;
    bottom:0;
    margin: auto;

    text-align:center; border:1px solid #474747; padding:15px; background:  #d4c8c8  ;  
    font-size:.5em;
 }

这里的重点是html嵌套，绝对位置和在div顶部堆叠pic的z-index。

请记住，这将需要对媒体查询进行一些修改，以使高度适应性更加完美，但这是我能够快速提出的最佳方法。

我可以尝试一下flexbox布局，我认为这可以与flexbox完美配合。理想情况下，这样的东西是在Photoshop imo中完成的。

链接到codepen，点击它所说的点击以查看小型演示。

http://codepen.io/damianocel/pen/dYKxgW

响应式设计图像缩放（tumblr主题）

1 个答案: