Сделать div не зависит от размера другого div

Question

Я создаю какую-то редактируемую карту следующим образом. Когда я нажимаю на иконку редактирования на первой карточке, появляется тень, и она становится выше.

Моя проблема в том, могу ли я сделать так, чтобы, когда эффект тени показывал другие элементы, находящиеся под ним, не двигался / не изменял положение таким образом. Кроме того, этот код предположительно помещен во фрагмент. Когда появляется тень, окно предварительного просмотра (тело) становится выше, а предметы под ним движутся вниз. Я хочу, чтобы окно оставалось одинаковой высоты до и после появления тени.

Любая помощь приветствуется.

$(".card").click(function() {
  if ($(this).val() == 0) {
    $(this).addClass("clicked");
    $(this).val(1);
  }
  else {
    $(this).removeClass("clicked");
    $(this).val(0);
  }
});

$(".action").click(function() {
  var thisCard = $(this).parent().parent();
  thisCard.addClass("edit");
  thisCard.css({"width": "238px"});
  thisCard.find(".title").css({"display": "none"});
  thisCard.find(".action").css({"display": "none"});
  thisCard.find(".action-edit").css({"display": "table-cell"});
  thisCard.find(".input-group").css({"display": "table-cell"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".input-main").val(thisCard.find(".title").text());
  }
  else {
    thisCard.find(".input-main").val(thisCard.find(".title-main").text());
    thisCard.find(".input-sub").val(thisCard.find(".title-sub").text());
  }
  thisCard.find(".input-main").focus();
  thisCard.removeClass("clicked");
});

$(".check").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.css({"width": "240px"});
  thisCard.find(".title").css({"display": "table-cell"});
  thisCard.find(".action").css({"display": "table-cell"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".title").text(thisCard.find(".input-main").val());
  }
  else {
    thisCard.find(".title-main").text(thisCard.find(".input-main").val());
    thisCard.find(".title-sub").text(thisCard.find(".input-sub").val());
  }
  thisCard.removeClass("clicked");
});

$(".cancel").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.css({"width": "240px"});
  thisCard.find(".title").css({"display": "table-cell"});
  thisCard.find(".action").css({"display": "table-cell"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  thisCard.removeClass("clicked");
});

.card {
  display: table;
  width: 240px;
  height: 70px;
  border: transparent;
  border-radius: 3px;
  background-color: #FAFAFA;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  font-size: 16px;
  cursor: pointer;
  margin: 32px auto;
}

.card .content {
  display: table-row;
  width: 100%;
}

.card .content .title,
.card .content .input {
  display: table-cell;
  padding: 24px;
  width: calc(100% - 36px);
  font-size: 16px;
  color: #333;
}

.card .content .input {
  display: none;
}

input {
  border: none;
  font-size: 13px;
  border-bottom: solid 1px #c4c4c4;
  width: 100%;
}

input:focus {
  outline-style:none;
  box-shadow:none;
  border-bottom: solid 1px #c4c4c4;
}

.card .content .action {
  display: table-cell;
  width: 36px;
  padding: 24px 16px;
  text-align: right;
}

.card .content .action-edit {
  display: none;
  width: 36px;
  padding: 0;
  border-left: solid 1px #c4c4c4;
  vertical-align: top; 
}

.check,
.cancel {
  height: 34.5px;
  text-align: center;
}

.action-edit > .check i,
.action-edit >.cancel i {
  line-height: 35px;
  font-size: 13px;
}

.cancel i {
  color: #333;
}

.check i {
  color: #00c983; 
}

.check-tall,
.cancel-tall {
  height: 45.5px;
}

.check-tall i,
.cancel-tall i {
  line-height: 46px !important;
}

.cancel {
  border-bottom: solid 1px #c4c4c4; 
}

.card .content .action i {
  font-size: 14px; 
  color: #333;
}

.card .content .action i:hover {
  color: #00c983; 
}

.clicked {
  background-color: #CAF1FF;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
}

.edit {
  background-color: #fff;
  border: solid 1px #00c983;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.subtitle {
  font-size: 12px; 
}

.subtitle-label {
  color: #999; 
}

.input-sub {
  font-size: 12px;
}

.input-sub-line {
  display: table-row; 
  width: 100%;
}

.input-sub-label {
  display: table-cell; 
  width: 25%;
  font-size: 12px;
  color: #999;
}

.input-sub {
  display: table-cell; 
  width: 100%;
}

.input-group {
  display: none; 
  padding: 22px 24px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">

<div class="card" value=0>
  <div class="content">
    <div class="title">Education</div>
    <div class="input-group"><input type="text" class="input-main"></div>
    <div class="action"><i class="fas fa-pencil-alt"></i></div>
    <div class="action-edit">
      <div class="cancel"><i class="fas fa-times"></i></div>
      <div class="check"><i class="fas fa-check"></i></div>
    </div>
  </div>
</div>
<div class="caption">1-Attribute Card</div>

<div class="card" value=0>
  <div class="content">
    <div class="title"><span class="title-main">Education</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">030</span></span></div>
    <div class="input-group">
      <input type="text" class="input-main">
      <div class="input-sub-line">
        <div class="input-sub-label">Code</div> 
        <input class="input-sub" type="text"></div>
    </div>
    <div class="action"><i class="fas fa-pencil-alt"></i></div>
    <div class="action-edit">
      <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
      <div class="check check-tall"><i class="fas fa-check"></i></div>
    </div>
  </div>
</div>
<div class="caption">2-Attributes Card</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Для первого поля вы можете начать с изменения border на outline в классе .edit, так как это добавляет 2px к высоте.

Это не решает второй блок, где он имеет дополнительный контент внутри карты. Возможно, захотите сделать подпись position: absolute;

Answer 2

Я не уверен на 100%, правильно ли я понял ваш вопрос, но единственное движение, которое я вижу, вызвано границей, которая применяется к .card. Если вы добавите начальную границу к .card до того, как отредактируете ее, элемент не увеличится в размере и не будет двигаться. Я сделал границу прозрачной, чтобы ее не было видно.

$(".card").click(function() {
  if ($(this).val() == 0) {
    $(this).addClass("clicked");
    $(this).val(1);
  }
  else {
    $(this).removeClass("clicked");
    $(this).val(0);
  }
});

$(".action").click(function() {
  var thisCard = $(this).parent().parent();
  thisCard.addClass("edit");
  thisCard.css({"width": "238px"});
  thisCard.find(".title").css({"display": "none"});
  thisCard.find(".action").css({"display": "none"});
  thisCard.find(".action-edit").css({"display": "table-cell"});
  thisCard.find(".input-group").css({"display": "table-cell"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".input-main").val(thisCard.find(".title").text());
  }
  else {
    thisCard.find(".input-main").val(thisCard.find(".title-main").text());
    thisCard.find(".input-sub").val(thisCard.find(".title-sub").text());
  }
  thisCard.find(".input-main").focus();
  thisCard.removeClass("clicked");
});

$(".check").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.css({"width": "240px"});
  thisCard.find(".title").css({"display": "table-cell"});
  thisCard.find(".action").css({"display": "table-cell"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".title").text(thisCard.find(".input-main").val());
  }
  else {
    thisCard.find(".title-main").text(thisCard.find(".input-main").val());
    thisCard.find(".title-sub").text(thisCard.find(".input-sub").val());
  }
  thisCard.removeClass("clicked");
});

$(".cancel").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.css({"width": "240px"});
  thisCard.find(".title").css({"display": "table-cell"});
  thisCard.find(".action").css({"display": "table-cell"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  thisCard.removeClass("clicked");
});

.card {
  display: table;
  width: 240px;
  height: 70px;
  border: transparent;
  border-radius: 3px;
  background-color: #FAFAFA;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  font-size: 16px;
  cursor: pointer;
  margin: 32px auto;
  border: solid 1px transparent;
}

.card .content {    
display: flex;
    width: 100%;
    max-height: 86px;
}

.card .content .title,
.card .content .input {
  display: table-cell;
  padding: 24px;
  width: calc(100% - 36px);
  font-size: 16px;
  color: #333;
}

.card .content .input {
  display: none;
}

input {
  border: none;
  font-size: 13px;
  border-bottom: solid 1px #c4c4c4;
  width: 100%;
}

input:focus {
  outline-style:none;
  box-shadow:none;
  border-bottom: solid 1px #c4c4c4;
}

.card .content .action {
  display: table-cell;
  width: 36px;
  padding: 24px 16px;
  text-align: right;
}

.card .content .action-edit {
  display: none;
  width: 36px;
  padding: 0;
  border-left: solid 1px #c4c4c4;
  vertical-align: top; 
}

.check,
.cancel {
  height: 34.5px;
  text-align: center;
}

.action-edit > .check i,
.action-edit >.cancel i {
  line-height: 35px;
  font-size: 13px;
}

.cancel i {
  color: #333;
}

.check i {
  color: #00c983; 
}

.check-tall,
.cancel-tall {
  height: 45.5px;
}

.check-tall i,
.cancel-tall i {
  line-height: 46px !important;
}

.cancel {
  border-bottom: solid 1px #c4c4c4; 
}

.card .content .action i {
  font-size: 14px; 
  color: #333;
}

.card .content .action i:hover {
  color: #00c983; 
}

.clicked {
  background-color: #CAF1FF;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
}

.edit {
  background-color: #fff;
  border: solid 1px #00c983;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.subtitle {
  font-size: 12px; 
}

.subtitle-label {
  color: #999; 
}

.input-sub {
  font-size: 12px;
}

.input-sub-line {
  display: table-row; 
  width: 100%;
}

.input-sub-label {
  display: table-cell; 
  width: 25%;
  font-size: 12px;
  color: #999;
}

.input-sub {
  display: table-cell; 
  width: 100%;
}

.input-group {
  display: none; 
  padding: 22px 24px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">

<div class="card" value=0>
  <div class="content">
    <div class="title">Education</div>
    <div class="input-group"><input type="text" class="input-main"></div>
    <div class="action"><i class="fas fa-pencil-alt"></i></div>
    <div class="action-edit">
      <div class="cancel"><i class="fas fa-times"></i></div>
      <div class="check"><i class="fas fa-check"></i></div>
    </div>
  </div>
</div>
<div class="caption">1-Attribute Card</div>

<div class="card" value=0>
  <div class="content">
    <div class="title"><span class="title-main">Education</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">030</span></span></div>
    <div class="input-group">
      <input type="text" class="input-main">
      <div class="input-sub-line">
        <div class="input-sub-label">Code</div> 
        <input class="input-sub" type="text"></div>
    </div>
    <div class="action"><i class="fas fa-pencil-alt"></i></div>
    <div class="action-edit">
      <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
      <div class="check check-tall"><i class="fas fa-check"></i></div>
    </div>
  </div>
</div>
<div class="caption">2-Attributes Card</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>