Положение div на границе другого div

Question

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

Однако, как вы можете видеть, когда я перевожу элемент, некоторая его часть становится невидимой, так как содержимоене "толкнул" вниз.Как можно добиться того же результата, но правильно отобразить изображение?Я пытался играть с position: absolute, top и bottom, но не смог достичь желаемого результата.

Примечание : в моем приложении div с class="profile-info-container" находится внутри столбца Bootstrap, поэтому ширина установлена ​​на 100%.

Спасибо!

.profile-info-container {
  background-color: white;
  border: 2px solid #7EA2BC;
  border-radius: 10px;
  margin: 20px 10px;
  position: relative;
  text-align: center;
  min-height: 300px;
  height: auto;
  width: 100%
}

.profile-info-image {
  transform: translateY(-50%) rotate(45deg);
  border-radius: 100%;
  height: auto;
  margin: auto;
  width: 50%;
  border: 10px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
}

.profile-info-image img {
  transform: rotate(-45deg);
  border: 1px solid #7ea2bc;
  border-radius: 100%;
  height: 100%;
  width: 100%;
}

.half {
  width: 50%;
}

<div class="half">
  <div class="profile-info-container">
    <div class="profile-info-image">
      <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
    </div>
  </div>
</div>

Answer 1

Вместо использования translate вы можете создать макет CSS Grid здесь:

• make profile-info-container a контейнер контейнера ,

• место profile-info-image в первом столбце , охватывающее две строки,

• текст под изображением в третьем ряду,

• фон границы создается с использованием псевдоэлемента , который охватывает вторую и третью строки.

См. Демо ниже:

.profile-info-container {
  background-color: white;
  margin: 20px 10px;
  min-height: 300px;
  position: relative;
  text-align: center;
  height: auto;
  width: 100%;
  display: grid; /* grid container */
}

.profile-info-container::after {
  content: '';
  border: 2px solid #7EA2BC;
  border-radius: 10px;
  grid-row: 2 / 4; /* row 2 and 3*/
  grid-column: 1; /* column 1 */
}

h2 {
  grid-row: 3; /* row 3 */
  grid-column: 1; /* column 1 */
}

.profile-info-image {
  transform: rotate(45deg); /* <-- removed translate */
  border-radius: 100%;
  height: auto;
  margin: auto;
  width: 50%;
  border: 10px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  grid-row: 1 / 3; /* row 1 and 2 */
  grid-column: 1; /* column 1 */
}

.profile-info-image img {
  transform: rotate(-45deg);
  border: 1px solid #7ea2bc;
  border-radius: 100%;
  height: 100%;
  width: 100%;
}

.half {
  width: 50%;
}

<div class="half">
  <div class="profile-info-container">
    <div class="profile-info-image">
      <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
    </div>
    <h2>Some text here</h2>
  </div>
</div>

Answer 2

Я думаю, вы можете удалить transform:rotate для вашего раздела изображения, чтобы центрировать изображение аватара. Я добавил margin-top:30% к вашему контенту и profile-info-container.

.profile-info-container {
    background-color: white;
    border: 2px solid #7EA2BC;
    border-radius: 10px;
    margin: 20px 10px;
    position: relative;
    text-align: center;
    min-height: 300px;
    height: auto;
    width: 100%;
    margin-top: 30%;
}

.some-text {
    margin-top: 30%;
}

.profile-info-image {
    /*transform: translateY(-50%) rotate(45deg);*/
    border-radius: 100%;
    height: auto;
    margin: auto;
    width: 50%;
    border: 10px solid transparent;
    background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
    background-position: center center, left top, right top, left bottom, right bottom;
    background-origin: content-box, border-box, border-box, border-box, border-box;
    background-clip: content-box, border-box, border-box, border-box, border-box;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    left: 50%;
}

.profile-info-image img {
    /*transform: rotate(-45deg);*/
    border: 1px solid #7ea2bc;
    border-radius: 100%;
    height: 100%;
    width: 100%;
}

.half {
    width: 50%;
}

<div class="half">
    <div class="profile-info-container">
        <div class="profile-info-image">
            <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
        </div>
        <div class="some-text">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
</div>