Question

我对图像位置有疑问。我希望像here中那样获得相同的图像位置（我的意思是圆形徽标）。基本上，图像/徽标在标题图像和下面的内容之间被分成两半，并且它居中。我已经找到了一个答案，但它包括position:absolute的图像。如果有可能，我希望职位为position:relative。

提前感谢您提供任何帮助/提示：）

Answer 1

如果您希望图像/徽标覆盖标题，则必须使用绝对位置

position: absolute;
left: 50%;

顶部属性取决于标题的位置。

Answer 2

您可以尝试这样的事情：

    if let tb = self.tabBarController?.tabBar as? MyTabBar {
        tb.activeItemBackground = UIColor.red
    }

header{
  height: 200px; 
  background: red;
  position: relative;
}

.myImage{
  border-radius: 50%;
  border: 6px solid #fff;
  width: 120px;
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  box-sizing: border-box;
}

section{
  padding: 100px 20px 20px;
}

Answer 3

使用柔性盒子有点容易。 HTML在这里： -

<div class="parent">
   <div class="circle"></div>
</div>

CSS在这里： -

.parent{
  background-color: cyan;
  width: 100%;
  height:80px;
  position: relative;
  display: flex;
    justify-content:center;
}

.circle{
  position:absolute;
    background-color: grey;
    width:50px;
    height:50px;
    border-radius: 50%;
    border: 2px white solid;
    top:-25px;
}

Answer 4

您可以执行以下几个选项，而不是使用position: absolute：

你可以使用负上限，例如{ top: -30px; }，这会将你的项目向上移动30px。

或者，我的偏好是使用transform { transform: translateY(-80px); }。在这种情况下，您的元素将沿Y轴移动（平移）， - 80px。

Answer 5

/usr/bin/ruby2.3 -I/var/lib/gems/2.3.0/gems/rspec-support-3.5.0/lib:/var/lib/gems/2.3.0/gems/rspec-core-3.5.4/lib /var/lib/gems/2.3.0/gems/rspec-core-3.5.4/exe/rspec --pattern spec/base/\*_spec.rb File "c:/windows" should be directory (FAILED - 1) File "c:/temp/testfile.txt" should be file (FAILED - 2)时，您仍然可以使用position: relative / top / right / bottom移动元素。

left

.head {
  height: 130px;
  background-color: #ffaaaa;
}

.logo-wrapper {
  text-align: center;
}

.content .logo-wrapper .logo {
  border-radius: 50%;
  border: 3px solid white;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
  top: -20px;
  background-color: green;
}

Answer 6

＆＃13;

.first{
  width: 100%;
  position: relative;
  height: 300px;
  background-image: url("http://stuffpoint.com/sea-and-beach/image/27652-sea-and-beach-summer.jpg");
  background-repaet: no-repeat;
  background-size: cover;
}
.second{
  width: 100%;
  height: 500px;
  position: relative;
  background: pink;
}

.imageContainer{
  position: relative;
  width: 100px;
  top: -30px;
  background: yellow;
  height: 100px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  background-image: url("http://i2.cdn.cnn.com/cnnnext/dam/assets/130203065116-beyonce-12-super-169.jpg");
  background-position: center;
  background-size: cover;
  border: 4px solid pink;
}

＆＃13;

<div>
  <div class="first">
    
  </div>
  <div class="second">
    <div class="imageContainer">
      
    </div>
  </div>
</div>

＆＃13;

您可以尝试这种方法： https://jsfiddle.net/mzrgke8j/

基本上，图像不必具有

position: absolute;

你只需要将它对齐并抬起一点。

图像位置分为两半

6 个答案: