Html 相对定位和绝对定位。强制将徽标移动到拐角处_Html_Css_Twitter Bootstrap_Css Position_Responsive Images

Html 相对定位和绝对定位。强制将徽标移动到拐角处

html css twitter-bootstrap

Html 相对定位和绝对定位。强制将徽标移动到拐角处,html,css,twitter-bootstrap,css-position,responsive-images,Html,Css,Twitter Bootstrap,Css Position,Responsive Images,假设我有这样的情况：您可以看到几个主要部分：面板（红色边框）形象标志标题我需要这个设置：所以这个标志需要竖起。通常，每次我试图使图像绝对和徽标相对，然后将其向右浮动，它就会工作，但我松开了图像下方的标题我不能将标题设置为相对的，并用一些值将其从顶部推到顶部，因为图像是响应性的，并且会改变其高度这是我正在使用的代码 <!DOCTYPE html> <html lang="en"> <head> <link rel="sty

假设我有这样的情况：

您可以看到几个主要部分：

面板（红色边框）
形象
标志
标题

我需要这个设置：

所以这个标志需要竖起。通常，每次我试图使图像

绝对

和徽标

相对

，然后将其向右浮动，它就会工作，但我松开了图像下方的标题

我不能将标题设置为相对的，并用一些值将其从顶部推到顶部，因为图像是响应性的，并且会改变其高度

这是我正在使用的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style>
        .body {
            width: 100%;
        }

        .panel {
            border: 1px solid red;
            background-color: blue;
            margin: 50px;
        }
        img {
            width: 100%;
        }

        .logo {
            background-color: red;
            border: 1px solid yellow;
            width: 100px;

        }
    </style>
</head>
<body>

    <div class="panel">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVxPtnNvc1ZwknRSdJZIPjrmUHitXdUU_-TT3wuIF-mWND6sXV" class="img-responsive" alt="picture nature">
        <div class="logo">
            I'm a logo
        </div>
        <h1>I'm a title, hello</h1>
    </div>

</body>
</html>


.身体{
宽度：100%；
}
.小组{
边框：1px纯红；
背景颜色：蓝色；
利润率：50像素；
}
img{
宽度：100%；
}
.标志{
背景色：红色；
边框：1px纯黄色；
宽度：100px；
}
我是一个标志
我是一个头衔，你好

因此我在容器中添加了

位置：相对和位置：绝对；排名：0；右：0
至徽标
.body {
    width: 100%;
}
.panel {
    border: 1px solid red;
    background-color: blue;
    margin: 50px;
    position:relative;
}
img {
    width: 100%;
    height: 200px;
}
.logo {
    background-color: red;
    border: 1px solid yellow;
    width: 100px;
    position:absolute;
    top:0;
    right:0;
}


由于图像没有移动，需要更改其尺寸，因此可以使用absolute
将徽标移动到需要的任何位置。如果将其设置为绝对，则需要给出其容器（或至少是希望“包含”其中的容器）position:relative所以它必须在某个地方。
所以我在容器中添加了位置：相对的和位置：绝对的；排名：0；右：0
至徽标
.body {
    width: 100%;
}
.panel {
    border: 1px solid red;
    background-color: blue;
    margin: 50px;
    position:relative;
}
img {
    width: 100%;
    height: 200px;
}
.logo {
    background-color: red;
    border: 1px solid yellow;
    width: 100px;
    position:absolute;
    top:0;
    right:0;
}


由于图像没有移动，需要更改其尺寸，因此可以使用absolute
将徽标移动到需要的任何位置。如果将其设置为绝对，则需要给出其容器（或至少是希望“包含”其中的容器）position:relative所以它必须在某个地方。面板上的相对位置。绝对标志顶部：0，右侧：0
ntgCleaner快了34秒，所以接受他的回答


.身体{
宽度：100%；
}
.小组{
位置：相对位置；
边框：1px纯红；
背景颜色：蓝色；
利润率：50像素；
}
img{
宽度：100%；
高度：200px；
}
.标志{
位置：绝对位置；
排名：0；
右：0；
背景色：红色；
边框：1px纯黄色；
宽度：100px；
}
我是一个标志
我是一个头衔，你好
面板上的相对位置。绝对标志顶部：0，右侧：0
ntgCleaner快了34秒，所以接受他的回答


.身体{
宽度：100%；
}
.小组{
位置：相对位置；
边框：1px纯红；
背景颜色：蓝色；
利润率：50像素；
}
img{
宽度：100%；
高度：200px；
}
.标志{
位置：绝对位置；
排名：0；
右：0；
背景色：红色；
边框：1px纯黄色；
宽度：100px；
}
我是一个标志
我是一个头衔，你好
您需要在父面板中设置位置：相对
，并在中使用位置：绝对
。徽标
，将顶部
\右侧
设置为0

如果父级中没有position:relative
，并且使用position:absolute
该元素将退出与DOM相关的流程
绝对值
不要为元素留空间。相反，如果需要，请将其定位在相对于其最近定位的祖先的指定位置
任何，或相对于初始包含块的。绝对地
定位框可以有边距，并且它们不会以任何方式折叠
其他利润
查看有关的更多信息

.body{
宽度：100%；
}
.小组{
位置：相对位置；
边框：1px纯红；
背景颜色：蓝色；
利润率：50像素
}
img{
宽度：100%
}
.标志{
位置：绝对位置；
排名：0；
右：0；
背景色：红色；
边框：1px纯黄色；
宽度：100px
}

我是一个标志
我是一个头衔，你好
您需要在父面板中设置位置：相对
，并在中使用位置：绝对
。徽标
，将顶部
\右侧
设置为0

如果父级中没有position:relative
，并且使用position:absolute
该元素将退出与DOM相关的流程
绝对值
不要为元素留空间。相反，如果需要，请将其定位在相对于其最近定位的祖先的指定位置
任何，或相对于初始包含块的。绝对地
定位框可以有边距，并且它们不会以任何方式折叠
其他利润
查看有关的更多信息

.body{
宽度：100%；
}
.小组{
位置：相对位置；
边框：1px纯红；
背景颜色：蓝色；
利润率：50像素
}
img{
宽度：100%
}
.标志{
位置：绝对位置；
排名：0；
右：0；
背景色：红色；
边框：1px纯黄色；
宽度：100px
}

我是一个标志
我是一个头衔，你好
请检查此url。请检查此url。哈哈哈，接受你喜欢的答案吧！那么，您将图像的位置设置为相对于最近的相对父对象？@DenisRozimovschii您不需要对图像做任何操作。如果要移动徽标，请将其更改为