Процентное зависимое выравнивание

122

12 января 2019, 13:30

Не могу выровнять с помощью "left:100%/top:100%" два блока относительно границ таблицы. Почему выравнивание идет по непонятным границам обёртки "wrapper" вместо выравнивания таблицы? Нижний блок "+" должен быть выровнен под левой нижней ячейкой таблицы (примерно, не учитывая border), правый блок "+" должен быть выровнен справа от верхней правой ячейки таблицы. По какой причине выходит так как выходит?

html, body{ 
	margin:0px; 
	padding:0px; 
} 
 
.wrapper{	 
	margin:51px; 
} 
 
.tab_small{			 
	border: 1px solid #48aae6; 
	position: relative;	 
	border-spacing: 2px; 
	margin-top: 43px; 
} 
 
.tab_small td{	 
	background-color: #48aae6;	 
} 
 
.box{	 
	height: 48px; 
	width: 48px; 
} 
 
.opt_buttons{	 
	display: flex; 
	height: 50px; 
	width: 50px; 
	justify-content: center; 
	align-items: center; 
	text-align: center; 
	font: caption;	 
	font-size: 24px; 
	color: white; 
} 
 
.plus{ 
	position:absolute; 
	background-color: #f3a500; 
} 
 
.bottom_plus{ 
	top: 100%; 
	left: 0% 
} 
 
.right_plus{	 
	left: 100%; 
	top: 0%; 
}

<div class="wrapper"> 
<table class="tab_small"> 
		<tbody id="str"> 
			<tr class="col"> 
				<td class="box"></td> 
				<td class="box"></td> 
				<td class="box"></td> 
				<td class="box"></td> 
			</tr> 
			<tr class="col"> 
				<td class="box"></td> 
				<td class="box"></td> 
				<td class="box"></td> 
				<td class="box"></td> 
			</tr> 
			<tr class="col"> 
				<td class="box"></td> 
				<td class="box"></td> 
				<td class="box"></td> 
				<td class="box"></td> 
			</tr> 
			<tr class="col"> 
				<td class="box"></td> 
				<td class="box"></td> 
				<td class="box"></td> 
				<td class="box"></td> 
			</tr> 
		</tbody>			 
	</table> 
	<div class="plus bottom_plus opt_buttons">+</div> 
	<div class="plus right_plus opt_buttons">+</div> 
  </div>

Answer 1

Не забываем, что кроме top и left, есть ещё right и bottom ;-)
Ну и calc() в помощь (благо, давно поддерживается):

html, 
body { 
  margin: 0; 
  padding: 0; 
  height: 100%; 
} 
 
.wrapper { 
  position: relative; 
  padding: 50px; 
  height: calc(100% - 100px); 
  min-height: 312px; 
  min-width: 312px; 
} 
 
.tab_small { 
  border: 1px solid #48aae6; 
  border-spacing: 2px; 
} 
 
.tab_small td { 
  background-color: #48aae6; 
} 
 
.box { 
  height: 48px; 
  width: 48px; 
} 
 
.opt_buttons { 
  height: 50px; 
  width: 50px; 
  text-align: center; 
  font: caption; 
  font-size: 24px; 
  line-height: 50px; 
  color: white; 
} 
 
.plus { 
  position: absolute; 
  background-color: #f3a500; 
} 
 
.bottom_plus { 
  bottom: 50px; 
  left: 50px; 
} 
 
.right_plus { 
  right: 50px; 
  top: 50px; 
}

<div class="wrapper"> 
  <table class="tab_small"> 
    <tbody id="str"> 
      <tr class="col"> 
        <td class="box"></td> 
        <td class="box"></td> 
        <td class="box"></td> 
        <td class="box"></td> 
      </tr> 
      <tr class="col"> 
        <td class="box"></td> 
        <td class="box"></td> 
        <td class="box"></td> 
        <td class="box"></td> 
      </tr> 
      <tr class="col"> 
        <td class="box"></td> 
        <td class="box"></td> 
        <td class="box"></td> 
        <td class="box"></td> 
      </tr> 
      <tr class="col"> 
        <td class="box"></td> 
        <td class="box"></td> 
        <td class="box"></td> 
        <td class="box"></td> 
      </tr> 
    </tbody> 
  </table> 
  <div class="plus right_plus opt_buttons">+</div> 
  <div class="plus bottom_plus opt_buttons">+</div> 
</div>