Блог

Главная - Вопросы по программированию - Укладка текста Html поверх div вместо вертикальной

Укладка текста Html поверх div вместо вертикальной

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть следующий набор divs внутри div, который я хочу сложить вертикально. Однако текст в последнем div, похоже, укладывается поверх div во втором разделе, когда я хотел, чтобы они складывались вертикально, поэтому текст в третьем погружении отображается под графиком. Я не уверен, почему display: flex и flex-direction: column; не заставляю divs вести себя так, как задумано.

 var width = 710, height = 710;
var margin = {top: -20, right: 30, bottom: 40, left: 40};

d3.select("canvas").attr("width", width).attr("height", height);

var canvas = d3.select("canvas");

var context = canvas.node().getContext("2d");

var svg = d3.select("#app")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform",
        "translate("   margin.left   ","   margin.top   ")");

var xAxis = d3.scaleLinear()
    .domain([-1.5, 1.5])
    .range([0, width]);

svg.append("g")
    .attr("transform", "translate(0,"   height   ")")
    .call(d3.axisBottom(xAxis));

var yAxis = d3.scaleLinear()
    .domain([-1.5, 1.5])
    .range([height, 0]);

svg.append("g")
    .call(d3.axisLeft(yAxis)); 
 p {
    font-size: 2.7vmin;
    line-height: 1.8; 
    text-align: left; 
    /*color: white;  */
}
button {
    display: inline;
    margin-left: 2rem;
}

.simBlock {
    display: flex;
    flex-direction: column;
}

svg {
    position: absolute;
}

canvas {
    position: absolute;
}

#section {
    display: flex;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="simBlock">
    <div id="section">
        <button type="button" id="pauseButton">Play/Pause</button>
        <button type="button" id="resetButton">Reset</button>
    </div>
    <div id="section">
        <canvas></canvas>
        <svg id="app"></svg>
    </div>
    <div id="section">
        <p>
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, minus deleniti. Quia consectetur laboriosam aperiam inventore, suscipit id iusto neque culpa? Perferendis mollitia corporis saepe aspernatur enim necessitatibus voluptatibus earum.
        </p>
    </div>    
</div>

Комментарии:

1. Идентификаторы должны быть уникальными на странице. Вы можете изменить это на класс.

2. Вам нужно избавиться от position: absolute; from canvas

Ответ №1:

Согласно комментариям, удаление position: absolute с холста делает свое дело