Question

我写过包含样式表的HTML代码。图片，标题来自课堂，我想在标题之上显示图片 ..现在它的位于图片图层下方。而标题也不适合数据层。帮我.. 这是html代码：

<div id="layout-panel">
        <div id="tile-container">
            <div id="tiles-panel" data-bind="foreach: data">
                <div class='row-horizontal-tile'>
                    <div class='data-layer'>
                        <div><img data-bind="attr:{src:ImageUrl}" class="stick-image"/></div>                              
                        <div class='text-title' data-bind="text: Title">
                        </div>                 
                    </div>                        
                </div>
            </div>
        </div>
    </div>

以上html代码的css如下：

.row-horizontal-tile
{         
    margin:10px 5px 8px 1%; 
    width: 23%;
    height: 90%;
    display: inline-block;   
}
.data-layer
{    
    color:#ffffff;    
    font-family:Calibri;        
    text-align:inherit;     
    color:Black; 
    background-color: white;
    height: 100%;
    width:100%;
    border-width: 3px;
    border-style:outset;     
} 
.stick-image
{    
    height: 100%;
    width:100%;  
    background-color: white;
}    
.text-title
{   
    font-family: DokChampa;
    font-size: large;
    text-align:center;
}
#layout-panel
{
    background-color: #444444;
    width: 100%;
    height: 70%; 
}
#tile-container
{
    height: 80%;
    width: 90%;
    background-color:#CCCCCC;
    position:relative;    
    top: 10%;  
    left: 5%; 
}
#tiles-panel
{   
    height: 100%; 
    white-space:nowrap;
    overflow-x:hidden;  
    overflow-y:hidden; 
}

提前致谢..

Answer 1

在下面的课程中添加这些属性可能会对您有所帮助：

.data-layer{ position:relative;}

.text-title{ position:absolute; z-index:9; bottom:5px; right:5px;}

CSS图层，标题属于图像层

1 个答案: