代码之家 › 专栏 › 技术社区 › Greg

如何在HTML CSS网格上定位“覆盖矩形”,但从列边界水平偏移?(按我的形象)

css3 html5 css html

Greg · 技术社区 · 6 年前

如何在HTML CSS网格上定位“覆盖矩形”,但从列边界水平偏移?(根据我的图片)

背景:

假设使用HTML5和CSS3
使用DIV创建的网格,使用CSS“网格”设置格式
网格已经创建,因此要将额外的蓝色矩形以视觉方式覆盖到网格上。矩形是带有CSS格式的DIV,显示为蓝色矩形
例如,蓝色矩形必须从20%开始到item5单元格,从50%停止到item6单元格
[我在这里得到了一个很好的答案,但是忽略了突出显示我必须同时具有偏移量的需要]

从下面的html/css开始。

<div classname=“wrapper”>
<DIV classname=“Box”>项目1</DIV>
<DIV classname=“box”>项目2</DIV>
<DIV classname=“box”>第3项</DIV>
<DIV classname=“box”>第4项</DIV>
<DIV classname=“box”>第5项</DIV>
<DIV classname=“box”>第6项</DIV>
<DIV classname=“box”>第7项</DIV>
<DIV classname=“box”>第8项</DIV>
<DIV classname=“box”>第9项</DIV>
&L/DIV & GT;
< /代码> 

 

包装{
显示:网格;
网格模板列:1fr 1fr 1fr;
}
框{
边界半径:5px;
边框:1倍纯色棕色;
字体大小:150%;
高度:120 px;
}
< /代码> <假设使用HTML5和CSS3
使用DIV创建的网格,使用CSS“网格”设置格式
网格已经创建,因此要将额外的蓝色矩形以视觉方式覆盖到网格上。矩形是带有CSS格式的DIV,显示为蓝色矩形
例如,蓝色矩形必须从20%开始到item5单元格,从50%停止到item6单元格
[我在这里得到了一个很好的回答With HTML/CSS how does one overlay/position a Rect on an existing HTML grid as per my diagram但是忽略了强调的需要,我也必须有补偿]




从下面的html/css开始。

HTML

<div className="wrapper">
  <div className="box">Item 1</div>
  <div className="box">Item 2</div>
  <div className="box">Item 3</div>
  <div className="box">Item 4</div>
  <div className="box">Item 5</div>
  <div className="box">Item 6</div>
  <div className="box">Item 7</div>
  <div className="box">Item 8</div>
  <div className="box">Item 9</div>
</div>


CSS

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}

1 回复 | 直到 6 年前

Temani Afif 6 年前

您可以考虑如下伪元素:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}
.overlay {
  position:relative;
}
.overlay:before {
  content:"overlay";
  position:absolute;
  left:20%;
  right:-50%;
  top:30px;
  bottom:30px;
  background:blue;
}

<div class="wrapper">
  <div class="box">Item 1</div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
  <div class="box">Item 4</div>
  <div class="box overlay">Item 5</div>
  <div class="box">Item 6</div>
  <div class="box">Item 7</div>
  <div class="box">Item 8</div>
  <div class="box">Item 9</div>
</div>

如果需要使用DIV元素,也可以这样做,但要调整顶部/左侧/右侧,请将容器视为引用

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  
  position:relative;
}
.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}
.overlay {
  position:absolute;
  left:calc(33% + 0.2 * 33%);
  right:calc(0.5 * 33%);
  top:calc(33% + 30px);
  height:80px;
  background:blue;
}

<div class="wrapper">
  <div class="box">Item 1</div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
  <div class="box">Item 4</div>
  <div class="box">Item 5</div>
  <div class="box">Item 6</div>
  <div class="box">Item 7</div>
  <div class="box">Item 8</div>
  <div class="box">Item 9</div>
  
  
  <div class="overlay">oevrlay</div>
</div>